ReactJS：为什么传递组件的初始状态支持反模式？

我在SocketIO的帮助下创build了一个小型的ReactJS仪表板，用于实时更新。 即使我有仪表板更新，它让我感到困惑，我不太确定如果我做得正确。

最让我感到困惑的是getInitialState中的道具作为反模式的post。 我创build了一个仪表板，可以从服务器获取实时更新，除了加载页面之外，不需要用户交互。 从我读过的， 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 } } 

除非我误解了上述博客文章，否则这是一种反模式。 但是我没有看到把组件注入状态的其他方式，我不明白为什么它是一个反模式，除非我重新贴上我所有的道具来预先加上它们。 如果有的话，我觉得这是一个反模式，因为现在我必须跟踪比以前更多的variables（那些以前和后者为前缀的variables）。

Answer 1

免责声明 ：当我回答这个问题时，我正在学习/试图实施香草Flux，我有点怀疑。 后来我把所有东西都迁移到了Redux。 所以，build议：只要与Redux或MobX一起去。 有机会，你甚至不需要这个问题的答案了（除了科学）。

将初始状态作为prop传递给组件是一种反模式，因为getInitialState方法仅在组件首次渲染时调用。 没有更多。 这意味着，如果您重新呈现该组件将传递不同的值作为prop ，组件将不会作出相应的反应，因为组件将从第一次渲染时保持该状态。 这是非常容易出错的。

这是你应该做的：

尽量让你的组件尽可能无状态。 无状态组件更容易testing，因为它们基于input呈现输出 。 这样简单。

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

是的，你可以为他们大多数。 为了做到这一点，select一个外部组件作为国家持有者。 使用你的例子，你可以创build一个包含数据的Dashboard组件和一个完全无状态的Widget组件。 Dashboard负责获取所有数据，然后渲染多个Widgets ，通过props接收他们所需的一切。

但是我的小部件有一些状态..用户可以configuration它们。 我如何使他们无国籍？

您的Widget可以公开事件，在处理时会导致包含在Dashboard的状态发生变化，导致每个Widget被重新渲染。 通过让props接收一个函数，在你的Widget创build“事件”。

好的，现在，仪表板保持状态，但是如何将初始状态传递给它？

你有两个select。 最值得一提的是，您在Dashboard getInitialState方法中进行Ajax调用，以从服务器获取初始状态。 您也可以使用Flux ，这是一种更复杂的pipe理数据的方式。 stream量更多的是一种模式，而不是一种实现。 您可以在Facebook的Dispatcher实现中使用纯Flux，但可以使用Redux ， Alt或Fluxxor等第三方实现。

或者，您可以将这个初始状态作为prop传递给Dashboard ，明确声明这只是初始状态，比如initialData 。 但是，如果select此path，则无法向其传递不同的初始状态，因为它会在第一次渲染之后“记住”状态。

OBS

你的定义不太对。

状态用于存储可变数据，即在组件生命周期中将要改变的数据。 状态的改变应该通过setState方法来完成，并且会导致组件重新渲染。

使用道具将不可变的数据传递给组件。 在组件生命周期中不应该改变。 只使用道具的组件是无状态的。

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