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

Question

我从this post 了解到，如果事件是基于non-react 的，即 setTimeout、Promise 调用，React 不会自动批量更新状态。 （简而言之，来自 Web API 的任何事件。）

这与react-based 事件不同，例如来自 onClick 事件（等）的事件，这些事件通过对限制渲染的反应进行批处理。这在this answer 中得到了很好的说明，它基本上证明了虽然这只会触发一次渲染：

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

这会触发两个：

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

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

在不同的帖子中提供了一些选项，但希望获得一些专家指导，了解哪些是最佳做法：

• Redux（我还没有使用过这个库，我担心要彻底检查我的状态处理）。这似乎也是一个很常见的问题，我原以为 React 有它自己的本地批处理异步状态更新的方式。
• userReducer 并将我的所有状态捆绑为一个。然后我可以通过一次状态更新来更新所有内容。考虑到我的不同状态如何直观地使保持离散更有意义，这没有意义。
• 使用ReactDOM.unstable_batchedUpdates(() => { ... })，按照this answer 中的建议

Answer 1

所以，以防万一没有更好的答案出现，我发现这个article on Medium 显示了一个非常好的、简单的ReactDOM.unstable_batchedUpdates(() => { ... }) 工作示例。 （您必须向下滚动到以下部分：“如何强制批处理？”）。

作者还补充说：

虽然这个函数被认为是“不稳定的”，但显然 React 打算在以下版本中解决这个问题。

“在未来的版本中 （可能是 React 17 及更高版本），React 默认会批量更新所有更新 所以你不必考虑这个”，根据 Dan Abramov 的说法。