React Redux 如何处理循环中的连续变化

Question

如果我有一个在每个循环中分派 redux 操作的循环，React 和 Redux 如何处理更新连接的组件？如果每个 redux 动作都会单独导致某些组件的重新渲染，并假设每个循环都会将状态更新为具有新值，那么这些组件是否每次都在循环中重新渲染？

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

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

关于如何解决这个问题的任何想法？这意味着每次 redux 操作通过 reducer 并更改状态时，我都希望连接组件的 "componentWillReceiveProps" 方法为运行。

Answer 1

起初我不确定 redux 所以我写下了我的想法作为评论。
我越想越觉得我们知道答案：
首先，React 的 setState 是异步的 DOCS

This form of setState() is also asynchronous, and multiple calls during the same cycle may be batched together.

可是仔细一想，又怎么可能不是呢？
Js 只有 1 个线程，这个线程忙于你的循环，所以它无法自行释放它来调用 dispatch 或 setState 等代码
当你的循环完成后，这是所有 "disptaching" 和状态设置为运行的时间，这里令人惊奇的部分是它可以 "remember" 每个变量和对象的上下文和范围，感谢我们的好朋友闭包。

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 如何处理循环中的连续变化

How does React Redux handle successive changes in a loop

javascript

loops

render

reactjs

redux