Question

我在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
    }
}

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

Answer 1

免责声明：当我回答这个问题时，我正在学习/尝试实施香草Flux，我有点怀疑它。后来我将所有内容迁移到Redux。所以，建议：只需使用Redux或 MobX。有机会你甚至不需要这个问题的答案不再（科学除外）。

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

以下是你应该做的事情：

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

但是嘿..我的组件数据发生变化..我无法让他们成为无国籍

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

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

您的Widget可以公开事件，这些事件在处理后会导致Dashboard中包含的状态发生变化，从而导致每个Widget被重新呈现。你创造了＆＃34;事件＆＃34;通过Widget接收功能，在props中。

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

您有两种选择。最常推荐的是，您使用Dashboard getInitialState方法进行Ajax调用以从服务器获取初始状态。您还可以使用Flux，这是一种更复杂的数据管理方式。 Flux更像是一种模式，而不是一种实现。您可以将纯粹的Flux与Facebook Dispatcher的实施结合使用，但您可以使用第三方实施，例如Redux，Alt或Fluxxor。

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

<强> OBS

你的定义不太恰当。

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

道具用于将可模数据传递给组件。它们不应在组件生命周期中发生变化。仅使用道具的组件是无状态的。

This是＆＃34;如何将初始状态传递给组件＆＃34;的相关来源。

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

1 个答案: