爲什麼在React的#setState中使用函數解決異步問題？

Question

從docs開始，它表示「React可能會將多個setState（）調用批量調用爲單個更新以提高性能」，因此建議使用函數而不是用於setState的參數的對象。這是如何解決問題的？

// Wrong 
this.setState({ 
    counter: this.state.counter + this.props.increment, 
}); 

// Correct 
this.setState((prevState, props) => ({ 
    counter: prevState.counter + props.increment 
})); 

Answer 1

當你在一個對象對setState通過，反應會採取任何你傳遞，創建將跟蹤什麼傳入，然後將最終更新狀態的事件。正如文檔所說，如果運行多個setStates，反應可能將這些批處理集中在一起，並且由於它會異步發生，也就是在某個時刻，在運行第一個示例時，它可能會使用實際上是舊的並導致意外的this.state.counter副作用。

第二個選項被認爲更安全，因爲它非常像一個承諾：當你傳遞一個函數時，一旦狀態已經被更新，React將只運行這個函數。這確保您每次更新時都使用正確的this.state.counter變量，方法是使用它們提供的prevState變量作爲回調的參數。

我沒有自己遇到過使用第一種方法的問題，但我也沒有嘗試一次性淹沒一堆setStates調用，我確信這是確實出現的時候。我看到這種犯規的主要方式是當他們試圖在設置狀態之後立即使用新狀態。

例如：

increaseCounter() { 
this.setState({ 
    counter: this.state.counter + this.props.increment, 
}); 

// this will more then likely be the previous value 
// as setState does not run right away, but asynchronously 
this.useNewCounter(this.state.counter) 
} 

在比如，我們可以預期的是，當useNewCounter被調用，它將採用最新的狀態，但它不會，參考仍將在以前的值，直到指出反應更新在調用此方法後的某個時刻的狀態。