為什麼react在setTimeOut中使用setSate不會批量更新

先看程式碼

class App extends React.Component {
  state = { val: 0 }
  componentDidMount() {
    this.setState({ val: this.state.val + 1 })
    console.log(this.state.val)
    this.setState({ val: this.state.val + 1 })
    console.log(this.state.val)
    setTimeout(_ => {
      this.setState({ val: this.state.val + 1 })
      console.log(this.state.val);
      this.setState({ val: this.state.val + 1 })
      console.log(this.state.val)
    }, 0)
  }
  render() {
    return <div>{this.state.val}</div>
  }
}
// 依次輸出 0， 0， 2， 3
複製程式碼

• 問題一：什麼是批量更新？

  react中setState是非同步方法，開發者可能會頻繁更改資料，但只想渲染最後的結果。所以react中setState使用批量更新避免了頻繁渲染，提高了效能。

• 問題二：為什麼在setTimeout中沒有批量更新？

  setTimeout是非同步方法，react無法控制非同步方法的執行順序，所以在非同步方法中呼叫setTimeout會即時渲染，不會使用批量更新

• 問題三：怎麼更改state資料是拿到上次更改的state？

  可以使用setSate的回撥函式

  this.setState({ val: this.state.val + 1 }, () => {
    this.setState({ val: this.state.val + 1 })      
  })
  複製程式碼

  可以使用prevState

  this.setState((prevState) => ({ count: prevState.count + 1 }));
  this.setState((prevState) => ({ count: prevState.count + 3 }));
  複製程式碼

  可以使用上面所說的setTimeout（不建議使用）

想要知道react原始碼是怎麼實現的可以檢視下面的參考連結。

參考連結：www.10tiao.com/html/780/20…