Question

如果我有一个循环在每个循环上调度redux操作，React和Redux如何处理更新连接的组件？如果每个redux操作都会单独导致某些组件的reRender，并假设每个循环更新状态以获得新值，那么每次循环时都会对这些组件进行reRender吗？

组件的更新生命周期挂钩是否在循环中同步运行，或者React / Redux是否在某处批量处理预期的更改，然后在循环完成后更新一次？

根据我刚才的经验，似乎有某种批处理正在进行，因为一个组件似乎只在循环结束时更新，所有更改都立即注册。

有关如何解决此问题的任何想法？意思是我想要一个连通的组件＆＃34; componentWillReceiveProps＆＃34;每次redux操作通过reducers并改变状态时运行的方法。

Answer 1

起初我不确定redux所以我把自己的想法写成了评论。
我越是想到它，我越发现我们知道答案：
首先，反应的setState与他们DOCS

的异步相同

这种形式的setState（）也是异步的，并且是多次调用在同一周期内可以一起批量处理。

但是当你想到它时，又怎么可能呢？ Js只有一个线程，这个线程忙于你的循环所以它不能自己释放来调用像dispatch或setState等代码。循环完成后，这是所有＆＃34; disptaching＆＃34;和州的设置，这里令人惊讶的部分是，它可以＆＃34;记住＆＃34;感谢我们的好朋友关闭每个变量和对象的上下文和范围。

Answer 2

只是为了回答，否则，上面的答案是正确的在setInterval中使用回调运行循环，保持一些任意的间隔时间。回调应该增加循环计数器和setState / dispatch-action

Answer 3

似乎React更新是异步的，至少对于更新redux存储所引起的更改，更改是批处理的。看一下为该组件运行setState的循环会发生什么会很有趣。无论如何，解决方案是使循环异步，如下所示（有关更清晰/更有效的方法来建立异步循环的建议将不胜感激）：

const iterable = [...]

const asyncLoop = (i) => {
  if(!iterable[i]) return
  const cycle = new Promise (resolve=>{
      dispatchReduxAction(iterable[i])
      resolve(i+1)
  })
  cycle.then((j)=>{
    asyncLoop(j)
  })
}

asyncLoop(0)

React Redux如何处理循环中的连续更改

3 个答案: