React中批量处理异步调用的状态更新，最佳方法是什么？

Question

我从这篇文章中了解到，React在处理非React事件（例如setTimeout、Promise调用等Web API事件）时不会自动批处理状态更新。（换句话说，对于来自Web API的任何事件，React都不会批量处理。）

而对于基于React的事件，例如onClick事件等，React会将其批处理以限制渲染次数。这在这个答案中有很好的说明。该答案基本上演示了尽管触发了一个render，但React仍然能够一次性更新多个状态的内容。

  function handleClickWithoutPromise() {
    setA('aa');
    setB('bb');
  }

这将会触发两个：

  function handleClickWithPromise() {
    Promise.resolve().then(() => {
      setA('aa');
      setB('bb');
    });
  }

对我来说，这是有问题的，因为在我的第一次页面加载时，我发送了一个请求到后端并接收各种数据，用于更新许多不同的状态对象。这会触发十几次重新渲染，显然不是最优解。

不同的帖子中提供了一些选项，但我希望得到一些专家指导，了解哪种是最佳实践：

• Redux（我还没有使用过这个库，并且担心要彻底改变我的状态处理方式）。这似乎是一个非常普遍的问题，我认为React应该有自己的原生方法来批量异步地更新状态。
• 使用userReducer，将所有状态捆绑在一起。然后可以通过一次状态更新来更新所有内容。考虑到我的不同状态在直觉上更适合保持离散。
• 按照此答案中的建议使用ReactDOM.unstable_batchedUpdates(() => { ... })

- JimmyTheCode

Answer 1

所以，万一没有更好的答案提供，我找到了这篇Medium上的文章，展示了ReactDOM.unstable_batchedUpdates(() => { ... })的一个非常好的、简单的例子（您需要向下滚动到“如何强制进行分批处理？”小节）。

作者还补充说：

尽管这个函数据称是“不稳定的”，但React显然打算在以后的版本中解决这个问题。

“在未来版本（可能是React 17及以后的版本），React将默认对所有更新进行批处理， 因此您不必考虑这个问题。”，Dan Abramov如是说。

- JimmyTheCode

---

React v17已经到来，应该很容易测试，对吧？快速浏览了一下，除了（实验性的）并发模式进行了改进之外，我没有看到其他任何提及：https://reactjs.org/blog/2020/10/20/react-v17.html - Drew Reese