首页 文章

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

提问于
浏览 次
71

我在SocketIO的帮助下创建了一个小型ReactJS仪表板，用于实时更新 . 即使我有仪表板更新，但是我不知道我是否正确地做了它 .

最让我烦恼的是Props in getInitialState as anti-pattern帖子 . 我've created a dashboard that gets live updates from a server, requiring no user interaction beyond loading the page. From what I'已经读过， 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 和那些没有的变量） .

reactjs

1 回答

  • 89

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

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

    这是你应该做的：

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

    But hey.. my components data change.. I can't make them stateless

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

    But my widgets have some state.. the user can configure them. How do I make them stateless?

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

    Ok, so now, Dashboard keeps the state, but how do I pass the initial state to it?

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

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

    OBS

    你的定义不太对劲 .

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

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

    This是"how to pass the initial state to components"的相关来源 .

    回复于

相关问题