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

Question

我从这篇文章中了解到，在基于事件（即 setTimeout、Promise 调用）的情况下，React 不会自动批量状态更新non-react。（简言之，来自 Web API 的任何事件。）

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

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

这将触发两个：

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

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

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

• Redux（我还没有使用过这个库，并且对彻底修改我的状态处理感到担心）。这似乎也是一个常见问题，我认为 React 有自己的批处理异步状态更新的本机方法。
• userReducer 并将我的所有状态捆绑在一起。然后我可以通过一次状态更新来更新所有内容。考虑到我的不同状态直观上保持离散更有意义，这是没有意义的。
• ReactDOM.unstable_batchedUpdates(() => { ... })按照本答案中的建议使用

Answer 1

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

\n

作者还补充说：

\n

\n

尽管这个函数应该是 \xe2\x80\x9cunstable\xe2\x80\x9d，但 React 显然\n打算在以下版本中解决这个问题。

\n

\n

\n

\xe2\x80\x9c在未来的版本\n（可能是 React 17 及更高版本），React 将默认批处理所有更新\n所以你\xe2\x80\x99t 不必考虑这个\xe2\x80\x9d ，根据 Dan 的说法阿布拉莫夫。

\n

\n