ReactJS：为什么将组件初始状态传递给反模式？

Question

我在 SocketIO 的帮助下创建了一个小型 ReactJS 仪表板以进行实时更新。尽管我更新了仪表板，但它让我很烦恼，我不太确定我是否做对了。

最让我烦恼的是 Props in getInitialState as anti-pattern post。我创建了一个从服务器获取实时更新的仪表板，除了加载页面外不需要用户交互。根据我的阅读，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
    }
}

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

Answer 1

Disclaimer: When I answered this question I was learning / trying to implement vanilla Flux and I was a bit skeptic about it. Later on I migrated everything to Redux. So, an advice: Just go with Redux or MobX. Chances are you won't even need the answer to this question anymore (except for the science).

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

这是你应该做的：

尽量让你的组件尽可能无状态。无状态组件更容易测试，因为它们根据输入呈现输出。就这么简单

但是嘿..我的组件数据改变了..我不能让它们无状态

是的，对于大多数人来说，您可以。为了做到这一点，select 一个外部组件成为状态持有者。使用您的示例，您可以创建一个包含数据的 Dashboard 组件和一个完全无状态的 Widget 组件。 Dashboard 负责获取所有数据，然后渲染多个 Widgets 通过 props.

接收他们需要的一切

但是我的小部件有一些状态。用户可以配置它们。我如何让他们成为无国籍人？

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

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

你有两个选择。最推荐的方法是在 Dashboard getInitialState 方法中调用 Ajax 以从服务器获取初始状态。您也可以使用 Flux, which is a more sophisticated way for managing data. Flux is more of a pattern, rather than an implementation. You can use pure Flux with the Facebook's implementation of the Dispatcher, but you can use third-party implementations like Redux, Alt or Fluxxor.

或者，您可以将此初始状态作为 prop 传递给 Dashboard，明确声明这只是初始状态.. 例如 initialData。但是，如果您选择此路径，则不能向后传递不同的初始状态，因为它将 "remember" 第一次渲染后的状态。

OBS

你的定义不太正确。

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

Props 用于将不可变数据传递给组件。它们不应在组件生命周期内更改。只使用 props 的组件是无状态的。

是 "how to pass the initial state to components".

上的相关来源

ReactJS：为什么将组件初始状态传递给反模式？

ReactJS: Why is passing the component initial state a prop an anti-pattern?

reactjs