商店中的竞争条件在`render`和`componentDidMount`之间

时间:2015-09-09 02:54:12

标签: javascript reactjs reactjs-flux

componentDidMount中设置Store侦听器而不同时调用setStateforceUpdate(从而触发立即重新渲染)是否安全?

在React中,常见示例似乎是在getInitialState中同步存储状态或在侦听之前将数据存储在render中,然后开始在componentDidMount中进行侦听。是什么阻止了在componentDidMount中渲染和设置监听器之间的时间间隔内错过了商店更改?

如果子组件在其componentDidMount中采用同步操作来更改商店,那么父组件是否会错过此更改?

如果子组件在componentDidMount中发出异步操作,是否有可能以父组件遗漏的方式更改Store?

React组件生命周期中是否存在异步事件可以进入的空白?

来自抢占式异步编程的背景,javascript中缺少显式同步保护,而在合作异步编程中经常是不必要的,这让我感到不安。

1 个答案:

答案 0 :(得分:1)

经过一些测试和挖掘源代码后,我得出的结论是,在初始组件生命周期的任何地方都无法触发异步事件(getInitialState - > componentWillMount - > {{ 1}} - >儿童 - > render)。

可以更改Store的子组件调用的同步事件肯定会在父进程调用componentDidMount之前解析,并导致视图和数据变得不同步。

我得出的结论是,不在componentDidMount中注册Store监听器的唯一原因是因为它们不应该在同构应用程序中的服务器上运行。我认为这不是充分的理由,因为它将侦听器注册到文档顺序之外(这可能会影响性能),并且在初始渲染期间可能会丢失对Store的同步更改。从概念上讲,这也是错误的做法。

我打算用浏览器测试componentWillMount注册我的听众:

componentWillMount