ReactJS：为什么传递组件初始状态是一个道具，一个反模式？

Question

我在SocketIO的帮助下创建了一个小的ReactJS仪表板，用于实时更新。即使我已经更新了仪表板，但我不太确定我是否做得正确，这让我很困扰。

最让我恼火的是getInitialState中作为反模式POST的道具。我创建了一个从服务器获取实时更新的仪表板，除了加载页面之外，不需要用户交互。根据我所读到的，this.state应该包含决定是否重新呈现组件的内容，而this.props...我还不知道。

但是，当最初调用react.render( ,...）时，只能传递道具。在我的例子中，我从服务器获取所有数据，所以初始道具最终都在this.state中。所以我的所有组件都有如下内容：

getInitialState: function() {
    return {
        progress: this.props.progress,
        latest_update: this.props.latest_update,
        nearest_center: this.props.nearest_center
    }
}

除非我误解了前面提到的博客文章，否则这是一种反模式。但是我看不出将状态注入组件的其他方法，而且我不明白为什么它是一个反模式，除非我重新标记我的所有道具，在它们上预先添加初始。如果有什么不同的话，我觉得这是一种反模式，因为现在我必须跟踪比以前更多的变量（那些预先带有initial的变量和那些没有的变量）。

Answer 1

免责声明：当我回答这个问题时，我正在学习/尝试实现vanilla Flux，我对此有点怀疑。后来我把所有东西都迁移到Redux。所以，一个建议：只要去Redux或Mobx。很可能你甚至不再需要这个问题的答案了（除了科学）。

将intial状态作为prop传递给组件是一种反模式，因为getInitialState方法只在组件第一次呈现时调用。这意味着，如果您以prop的形式传递不同的值来重新呈现该组件，该组件将不会做出相应的反应，因为该组件将保持第一次呈现时的状态。很容易出错。

以下是你应该做的：

尽量使您的组件无状态。无状态组件更容易测试，因为它们基于输入呈现输出。就这么简单。

但是嘿..我的组件数据更改。我不能让他们无国籍

是的，你可以，对大多数人来说。为此，选择一个外部组件作为状态保持器。使用您的示例，可以创建包含数据的仪表板组件和完全无状态的小部件组件。仪表板负责获取所有数据，然后呈现多个小部件，这些小部件通过道具接收所需的一切。

但是我的小部件有一些状态..用户可以配置它们。我怎么让他们无国籍？

您的小部件可以公开事件，这些事件在处理后会导致仪表板中包含的状态发生更改，从而导致重新呈现每个小部件。通过使用接收函数的道具在小部件中创建“事件”。

好了，现在，Dashboard保留了状态，但是如何将初始状态传递给它呢？

你有两个选择。最有意义的是，在DashboardGetInitialState方法中进行Ajax调用，从服务器获取初始状态。您还可以使用流量，这是一种更复杂的数据管理方式。通量更多的是一种模式，而不是一种实现。您可以在Facebook的dispatcher实现中使用纯通量，但也可以使用第三方实现，如Redux、Alt或fluxxor。

或者，您可以将此初始状态作为道具传递给仪表板，显式声明这只是初始状态。例如InitialData。但是，如果选择此路径，则不能将不同的初始状态传递给它，因为它将“记住”第一次呈现后的状态。

OBS

你的定义不太正确。

这是关于“如何将初始状态传递给组件”的相关来源。