ReactJS:为什么传递组件初始状态是一个道具就是一个反模式？
我在SocketIO的帮助下创建了一个小的ReactJS仪表板，用于实时更新。尽管我已经更新了仪表板，但它让我感到困扰，因为我不太确定自己做得是否正确。
最让我头疼的是Props in getInitialState as anti-pattern的帖子。我已经创建了一个从服务器获取实时更新的仪表板，除了加载页面外，不需要任何用户交互。根据我所读到的，this.state应该包含决定组件是否应该重新呈现的内容，以及this.props……我还不知道。
但是，当您最初调用React.render(<MyComponent />, ...)时，您只能传递道具。在我的例子中，我从服务器获取所有数据，所以无论如何，最初的属性最终都是在this.state中结束的。所以我的所有组件都有类似这样的东西：
getInitialState: function() {
return {
progress: this.props.progress,
latest_update: this.props.latest_update,
nearest_center: this.props.nearest_center
}
}除非我误解了前面提到的博客文章，否则这是一种反模式。但我看不到将状态注入组件的其他方法，我不明白为什么它是反模式，除非我重新标记所有的道具，以便在它们前面添加initial。如果有什么不同的话，我觉得这是一种反模式，因为现在我必须跟踪比以前更多的变量(有initial的变量和没有的变量)。
回答 1
Stack Overflow用户
发布于 2015-03-01 02:28:11
免责声明：当我回答这个问题时，我正在学习/尝试实现普通的Flux，我对此有点怀疑。后来我把所有东西都迁移到了Redux上。因此，一个建议:只需使用Redux或MobX。你很有可能不再需要这个问题的答案了(除了科学)。
将初始状态作为prop传递给组件是一种反模式，因为getInitialState方法只在组件第一次呈现时调用。这意味着，如果您重新呈现该组件，并将不同的值作为prop传递给该组件，该组件将不会做出相应的反应，因为该组件将保留它第一次呈现时的状态。它非常容易出错。
下面是你应该做的：
尽量让你的组件成为无状态的。无状态组件更易于测试，因为它们基于输入呈现输出。就这么简单。
但是嘿..我的组件数据更改..我不能让它们成为无状态的
是的，对于大多数人来说，你可以做到。为此，请选择一个外部组件作为状态容器。使用您的示例，您可以创建一个包含数据的Dashboard组件和一个完全无状态的Widget组件。Dashboard负责获取所有数据，然后呈现多个通过props接收所需内容的Widgets。
，但是我的小工具有一些状态..用户可以配置它们。如何使它们成为无状态？
您的Widget可以公开一些事件，这些事件在处理时会导致Dashboard中包含的状态发生更改，从而导致重新呈现每个Widget。通过让props接收函数，您可以在Widget中创建“事件”。
好的，现在，仪表板保持状态，但是我如何将初始状态传递给它？
您有两个选择。最推荐的一种方法是在Dashboard getInitialState方法中进行Ajax调用，以从服务器获取初始状态。您还可以使用Flux，这是一种更复杂的数据管理方法。Flux更像是一种模式，而不是一种实现。你可以在Facebook的Dispatcher实现中使用纯Flux，但你也可以使用第三方实现，如Redux、Alt或Fluxxor。
或者，您可以将此初始状态作为prop传递给Dashboard，显式声明这只是初始状态。比如initialData。但是，如果您选择此路径，则无法向后传递不同的初始状态，因为它将在第一次渲染后“记住”该状态。
OBS
你的定义不太正确。
状态用于存储可变数据，即在组件生命周期中将要更改的数据。状态的更改应通过setState方法进行，并将导致组件重新呈现。
Props用于将不可修改的数据传递给组件。它们不应该在组件生命周期中更改。只使用道具的组件是无状态的。
This是“如何将初始状态传递给组件”的相关来源。
https://stackoverflow.com/questions/28785106
复制相似问题