React中setState的更新策略

React中的setState有Batch模式(批量更新模式)和普通模式。

普通模式下,setState能夠即時更新state，重新呼叫 render 方法，然後把render方法所渲染的最新的內容顯示到頁面上。

Batch模式下,React不會立刻修改state。而是把這個物件放到一個更新佇列中，稍後才會從佇列中把新的狀態提取出來合併到 state中，然後再觸發元件更新。

1.由 React 控制的事件處理過程 setState 不會同步更新 this.state。如我們使用React庫中的表單元件，例如 select、input、button等，它都是處於React庫的控制之下，因此setState會以非同步的方式執行。
2.React 控制之外的情況， setState 會同步更新 this.state。通過JavaScript原生addEventListener直接新增的事件處理函式，使用setTimeout/setInterval 等setState會以同步的方式執行。

解決非同步更新

需要state狀態同步更新或state狀態改變後去處理邏輯。

1.使用setTimeout或setInterval

 componentDidMount(){
    setTimeout(() => {
      this.setState({
        value: this.state.value + 1
      })
      console.log('value', this.state.value)   
    }, 0)
}

2.使用setState的回撥函式

this.setState({
      value: this.state.value + 1
    }, () => {
      console.log('value', this.state.value) // 更新後的state
})