Reactjs React TypeScript-不应导出状态？_Reactjs_Typescript_Design Patterns

Reactjs React TypeScript-不应导出状态？

reactjs typescript design-patterns

Reactjs React TypeScript-不应导出状态？,reactjs,typescript,design-patterns,Reactjs,Typescript,Design Patterns,我有一个React应用程序，它通过getInitialInfo方法异步获取其信息。MessageView是最重要的组件，因此数据应该处于它的状态，即使它不会改变。在一个完美的世界中，IMessageInfo将通过道具传递我们需要导出类型IMessageInfo，因为存在依赖于此接口的代码选项1-（无私有状态的平面解决方案）这样我们就更喜欢构图了（他们说）。但我不认为在这里有构图有什么好处。你看到了吗？例如，如果IMessageInfo的任何成员更改（消息或图标），我们需要将所有对象mes

我有一个React应用程序，它通过

getInitialInfo

方法异步获取其信息。
MessageView
是最重要的组件，因此数据应该处于它的状态，即使它不会改变。在一个完美的世界中，
IMessageInfo
将通过道具传递
我们需要导出类型
IMessageInfo
，因为存在依赖于此接口的代码

选项1-（无私有状态的平面解决方案）
这样我们就更喜欢构图了（他们说）。但我不认为在这里有构图有什么好处。你看到了吗？例如，如果
IMessageInfo
的任何成员更改（消息或图标），我们需要将所有对象
messageInfo
传递给
this.setState（…）
，而不是仅更新
图标。基本上，它将是一个更容易出错的实现选项4-（扩展IMessageInfo。具有私有状态）我还考虑过使用IMessageViewState 扩展IMessageInfo。这似乎是实现不出口状态的最佳解决方案。但是我的同事说这不是一个好的解决方案，因为我们优先考虑继承而不是组合我认为遗产不会带来任何倒退结论在我看来，选项1最适合这个问题。既然国家的所有成员都是公共的，我认为没有必要有一个私人的国家。选项1使代码更干净尽管如此，如果我选择一个私人国家的解决方案，选项4会更合适问题：什么解决方案更正确这样我们就更喜欢构图了（他们说）。但我不认为在这里有构图有什么好处。你看到了吗？例如，如果IMessageInfo的任何成员发生更改（消息或图标），我们需要将所有对象messageInfo传递给this.setState（…）考虑需要向MessageView 内部状态添加更多数据的情况。在这种情况下，选项3针对以下方面进行了优化： interface IMessageViewState { messageInfo: IMessageInfo; } 当它从一开始就以这种方式分离时，很明显，您可以在哪里添加任何需要添加到私有状态的数据：它被添加到未导出的IMessageViewState ，而不会影响导出的IMessageInfo 界面的任何用户如果您100%确定IMessageInfo 拥有MessageView 类所需的一切，您可以选择选项1 这样我们就更喜欢构图了（他们说）。但我不认为在这里有构图有什么好处。你看到了吗？例如，如果IMessageInfo的任何成员发生更改（消息或图标），我们需要将所有对象messageInfo传递给this.setState（…）考虑需要向MessageView 内部状态添加更多数据的情况。在这种情况下，选项3针对以下方面进行了优化： interface IMessageViewState { messageInfo: IMessageInfo; } 当它从一开始就以这种方式分离时，很明显，您可以在哪里添加任何需要添加到私有状态的数据：它被添加到未导出的IMessageViewState ，而不会影响导出的IMessageInfo 界面的任何用户如果您100%确信IMessageInfo 拥有MessageView 类所需的一切，您可以选择选项1。我认为这里对接口和状态有一些误解。接口是某个对象的唯一类型。因此，您可能有单独的文件，用于导出解决方案所需的所有接口IMessageInfo 可能可以在多个地方使用 State 是某种类型的对象。它可以是IMessageInfo 类型或其他类型<代码>状态对一个组件是专用的。这是一个很好的反应您可以考虑使用ReDux使“代码>状态< /代码>中心到整个解决方案的附加选项。在这种情况下， IMessageInfo 可以从负责MessageInfo的部分存储导出范例 // store/MessageInfo.cs export interface IMessageInfo { /*...*/ } const initalMessageInfo: IMessageInfo = { /*...*/ } export const actionCreators = { requestMessageInfo () //... } export const reducer: Reducer<IMessageInfo> //... //store/MessageInfo.cs 导出接口IMessageInfo{/*…*/} 常量initalMessageInfo:IMessageInfo={/*…*/} 导出常量actionCreators={ requestMessageInfo（）/。。。 } 导出常量减速机：减速机/。。。在这种情况下，您将（1）在解决方案中保留IMessageView sigle，（2）使基于IMessageInfo 的state 可用于解决方案的多个组件。我认为这里对接口和状态有一些误解。接口是某个对象的唯一类型。因此，您可能有单独的文件，用于导出解决方案所需的所有接口IMessageInfo 可能可以在多个地方使用 State 是某种类型的对象。它可以是IMessageInfo 类型或其他类型<代码>状态对一个组件是专用的。这是一个很好的反应您可以考虑使用ReDux使“代码>状态< /代码>中心到整个解决方案的附加选项。在这种情况下， IMessageInfo 可以从负责MessageInfo的部分存储导出范例 // store/MessageInfo.cs export interface IMessageInfo { /*...*/ } const initalMessageInfo: IMessageInfo = { /*...*/ } export const actionCreators = { requestMessageInfo () //... } export const reducer: Reducer<IMessageInfo> //... //store/MessageInfo.cs 导出接口IMessageInfo{/*…*/} 常量initalMessageInfo:IMessageInfo={/*…*/} 导出常量actionCreators={ requestMessageInfo（）/。。。 } 导出常量减速机：减速机/。。。在这种情况下，您将（1）通过解决方案保持IMessageView sigle，（2）基于IMessageInfo 使state 可用于解决方案的多个组件