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

【问题标题】：How does React Redux handle successive changes in a loopReact Redux 如何处理循环中的连续变化
【发布时间】：2017-09-08 18:54:44
【问题描述】：

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

组件的更新生命周期钩子是在循环中同步运行，还是 React / Redux 在某处批处理预期的更改，然后在循环结束后更新一次？

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

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

【问题讨论】：

它应该在每个周期调用componentWillReceiveProps。每次您发送一个动作时，它都会更新商店，这应该传播到所有订阅的组件，并且您的组件应该接收新的道具。可以贴一些代码吗？
我知道 setState 是异步的，不确定 redux。但是当你考虑它时，js 的工作原理是你的循环总是在你有机会处理结果之前完成（这就是我们有闭包的原因）
使用 setInterval 运行循环，保持一些任意的间隔时间。回调应该增加计数器和 setState/dispatch-action

标签： javascript reactjs loops redux render

【解决方案1】：

一开始我不确定redux，所以我把我的想法写成评论。
我想得越多，我就越意识到我们知道答案：
首先，react 的 setState 是异步的，在他们的 DOCS 上

这种形式的setState()也是异步的，可以多次调用在同一个周期内可以一起批处理。

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

【讨论】：

有趣的是，如果你知道 redux，redux 似乎是同步的。当我从循环的每个周期一步一步地跟踪我的代码时，它会调度 redux 操作，并且该操作将一直流经 reducer，并且存储更改到达连接组件的“mapStateToProps”函数。这一切都将在循环的下一次迭代之前发生。只是当 redux store 中的变化产生的新数据到达组件时，组件就不会发生变化。所以 Redux 看起来是同步的，正如你所说，React 更新是异步和批处理的。
我认为 redux-saga 作为其实现生成器在这里可以提供帮助
@LeoFabrikant 如果此答案或任何其他答案解决了您的问题，请将其标记为已接受

【解决方案2】：

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

【讨论】：

【解决方案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)

【讨论】：

我很好奇在这种情况下如何处理生成器循环（如 redux-saga）