如果我需要更新 2 個依賴變量，React 如何只執行一次副作用函數

Question

假設我有以下使用反應鈎子的組件

const Component = (props) => {
   [state1, setState1] = useState();
   [state2, setState2] = useState();
   useEffect(()=>{
       // use state1 and state2 as param to fetch data
       ...
   }, [state1, state2])

   onSomethingChange = () => {
       setState1(...);
       setState2(...);
   }

   return (..);
}

當onSomethingChange觸發時，我認為它會調用副作用函數兩次，因為我在同一個依賴項數組中更新了 2 個不同的狀態變量。 我打算將這 2 個變量重構為 1 個對象，但我想我會首先將它們作為 2 個單獨的變量進行測試。

我觀察到的是，即使我在同一個依賴項數組中更新了 2 個不同的狀態變量，副作用函數也只會執行一次，這就是我想要的，但我不知道為什么。 有人可以解釋一下它在引擎蓋下是如何工作的嗎？

Answer 1

這是因為 React 有時可能會將多個狀態更改批處理為一個更新以提高性能。 如果從基於 React 的事件中觸發狀態更新，React 將批處理狀態更新，這就是為什么您的副作用塊只被調用一次的原因。 有關更多信息，您可以參考此線程： https : //github.com/facebook/react/issues/14259

Answer 2

React 在幕后批量狀態更新。

這只是意味着調用

setState1(...);
setState2(...);

在同一個同步 (!) 執行周期中（例如在同一個函數中）不會觸發兩個組件重新渲染周期。

相反，組件只會重新渲染一次，並且兩個狀態更新將同時應用。

沒有直接關系，但有時也會被誤解，是新狀態值何時可用。

考慮這個代碼：

console.log(name); // prints name state, e.g. 'Doe'
setName('John');

控制台日志（名稱）； // ??? 打印什么？ '約翰'？

你可以認為在 setName('John'); 之后訪問 name state; 應該產生新值（例如'John'），但事實並非如此。

新狀態值僅在下一個組件渲染周期（通過調用 setName() 進行調度）中可用。