ReactJS: 为什么传递组件初始状态是一个反模式？

我在 SocketIO 的帮助下创建了一个小的 ReactJS 仪表板，用于实时更新。尽管我已经更新了仪表板，但我还是不确定我是否做对了。

最让我烦恼的是 在 getInitialState 中支持反模式的帖子。我已经创建了一个指示板，它可以从服务器获取实时更新，除了加载页面之外不需要用户交互。从我读到的内容来看，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的变量和那些没有使用 initial的变量)。

45793 次浏览
小开
最佳答案

免责声明 : 当我回答这个问题时，我正在学习/尝试 实施香草通量和我有点怀疑它。后来我 所以，我的建议是: 使用 Redux 或者 你可能根本不需要这个问题的答案 (除了科学)。

将初始状态作为 prop传递给组件是一种反模式，因为只有在组件第一次呈现时才调用 getInitialState方法。这意味着，如果将该组件重新呈现，并将一个 与众不同值作为 prop传递，则该组件将不会作出相应的反应，因为该组件将保留第一次呈现时的状态。很容易出错。

你应该这么做:

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

但是，嘿. . 我的组件数据改变. . 我不能使他们无状态

是的，你可以，对大多数人来说。为此，选择一个外部组件作为状态持有者。使用您的示例，您可以创建一个包含数据的 Dashboard组件和一个完全无状态的 Widget组件。Dashboard负责获取所有数据，然后呈现多个 Widgets，它们通过 props接收所需的一切。

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

Widget可以公开事件，这些事件在处理时会导致 Dashboard中包含的状态发生变化，从而导致重新呈现每个 Widget。通过让接收函数的 props在 Widget中创建“事件”。

好的，现在，Dashboard 保持这个状态，但是如何将初始状态传递给它呢？

你有两个选择。最推荐的方法是在 Dashboard getInitialState方法中进行 Ajax 调用，以从服务器获取初始状态。您还可以使用 变化，这是一种更复杂的数据管理方法。Flux 更像是一种模式，而不是一种实现。您可以使用 Facebook 的 Dispatcher实现的纯 Flux，但是您可以使用第三方实现，如 复制、 Alt或 氟沙星。

Alternatively, you can pass this initial state as a prop to the Dashboard, explicitly declaring that this is just the initial state.. like initialData, for instance. If you choose this path, though, you can't pass a different initial state to it aftwards, because it will "remember" the state after the first render.

OBS

你的定义并不完全正确。

State 用于存储可变数据，即在组件生命周期中将要更改的数据。状态的更改应该通过 setState方法进行，并将导致组件重新呈现。

Props 用于向组件传递可变数据。它们不应该在组件生命周期中更改。只使用道具的组件是无状态的。

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


提交答案