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

Question

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

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

Answer 1

免责声明:当我回答这个问题时,我正在学习/尝试实施vanilla Flux,我对它有点怀疑.后来我把所有东西都迁移到了Redux.所以,建议:只需使用Redux或MobX.有可能你甚至不再需要这个问题的答案(除了科学).

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

这是你应该做的:

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

但是嘿..我的组件数据发生了变化..我不能让它们无国籍

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

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

您Widget可以公开事件,这些事件在处理时会导致包含的状态Dashboard发生更改,从而导致每个事件都被Widget重新呈现.您可以Widget通过props接收函数来创建"事件" .

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

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

或者,您可以将此初始状态作为a prop传递给Dashboard,明确声明这只是初始状态..例如initialData,就像.但是,如果选择此路径,则无法向其传递不同的初始状态,因为它将"记住"第一次渲染后的状态.

OBS

你的定义不太对劲.

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

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

这是"如何将初始状态传递给组件"的相关来源.