setState何時同步何時異步？

由React控制的事件處理程序，以及生命周期函數(shù)調(diào)用setState不會同步更新state 。

State 的更新可能是異步的

出于性能考慮，React 可能會把多個 setState() 調(diào)用合并成一個調(diào)用。

因為 this.props 和 this.state 可能會異步更新，所以你不要依賴他們的值來更新下一個狀態(tài)。

例如，此代碼可能會無法更新計數(shù)器：

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

要解決這個問題，可以讓 setState() 接收一個函數(shù)而不是一個對象。這個函數(shù)用上一個 state 作為第一個參數(shù)，將此次更新被應(yīng)用時的 props 做為第二個參數(shù)：

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

上面使用了箭頭函數(shù)，不過使用普通的函數(shù)也同樣可以：

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

State 的更新可能是同步的

React控制之外的事件中調(diào)用setState是同步更新的。比如原生js綁定的事件，setTimeout/setInterval等。

大部分開發(fā)中用到的都是React封裝的事件，比如onChange、onClick、onTouchMove等，這些事件處理程序中的setState都是異步處理的。