从 React 中的异步调用批处理 state 更新的最佳方法是什么？

Question

我从这篇文章了解到，React 不会自动批处理 state 更新，如果事件non-react的，即 setTimeout、Promise 调用。 （简而言之，来自 Web API 的任何事件。）

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

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

这将触发两个：

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

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

不同的帖子提供了一些选项，但希望获得一些专家指导，了解最佳实践：

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

Answer 1

因此，以防万一没有更好的答案出现，我在 Medium 上找到了这篇文章，它展示了一个非常好的、简单的ReactDOM.unstable_batchedUpdates(() => {... })工作示例。 （您必须向下滚动到“如何强制批处理？”部分）。

作者还补充说：

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

“在未来的版本中（可能是 React 17 和更高版本），React 将默认批处理所有更新，因此您不必考虑这一点” ，根据 Dan Abramov 的说法。