從 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 的說法。