React中this.setState的異步性質

Question

假設我有這兩個電話：

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

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

因為setState是異步的，所以如何保證第一次調用它會先執行？

Answer 1

從setState（）的react 文檔中可以看出

setState()將對組件狀態的更改排入隊列 ，並告訴React需要使用更新后的狀態重新呈現此組件及其子組件。 setState（）也是異步的， 同一循環中的多個調用可以一起批處理 。 例如，如果您嘗試在同一周期中多次向計數器增加或添加值，則會產生等效於：

Object.assign(
  previousState,
  {counter: previousState.counter + props.increment},
  {counter: previousState.counter + props.increment + 1},
  ...
)

后續調用將覆蓋同一周期中先前調用的值，因此數量將僅增加一次。 如果下一個狀態取決於當前狀態，我們建議使用更新程序功能表單，而不是：

this.setState((state) => {
  return {counter: state.counter + 1};
});