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

Question

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

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

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

这将触发两个：

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

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

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

Redux（我还没有使用过这个库，我担心要全面检查我的状态处理）。这似乎也是一个常见的问题，我本以为 React 有它自己的批处理异步状态更新的本地方式。
userReducer 并将我的所有状态捆绑为一个。然后我可以通过一次状态更新来更新所有内容。考虑到我的不同状态在直觉上如何保持离散更有意义，这没有意义。
按照

ReactDOM.unstable_batchedUpdates(() => { ... })

Answer 1

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

作者还补充说：

Although this function is supposedly “unstable”, React apparently intends to address this in the following versions.

“In future versions (probably React 17 and later), React will batch all updates by default so you won’t have to think about this”, according to Dan Abramov.

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

What's the best way to batch state updates from async calls in React?

javascript

asynchronous

setstate

reactjs