我們編寫這樣一段代碼

import React from "react"
export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        cont: 0
      }
    }

    componentDidMount() {
      this.setState({
        cont: this.state.cont+1
      })
    }

    render(){
      return (
        <div>
           { this.state.cont }
        </div>
      )
    }
}

我們在state中定義了一個(gè)cont 值是 0 然后 在componentDidMount 頁面第一次渲染完成后執(zhí)行的生命周期中 給他加一 然后我們運(yùn)行代碼

沒錯(cuò) 一開始是0 頁面第一次掛載完成 加一 變成了 1 是沒問題的 然后我們將componentDidMount的代碼改成這樣

給他多加幾次

但是 運(yùn)行之后 我們會(huì)驚奇的發(fā)現(xiàn) 還是1
因?yàn)?setState 這個(gè)函數(shù)是個(gè)異步執(zhí)行的 所以 相當(dāng)于 他們接到的this.state.cont都是0 那0加一 自然就是 1了
所以 相當(dāng)于 三次都給出了同樣的值

那么 想解決這個(gè)問題 我們可以這樣寫

import React from "react"
export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        cont: 0
      }
    }

    componentDidMount() {
      console.log("componentDidMount");
      this.setState((proState,props) => ({
        cont: proState.cont+1,
      }))
      this.setState((proState,props) => ({
        cont: proState.cont+1
      }))
      this.setState((proState,props) => ({
        cont: proState.cont+1
      }))
    }

    render(){
      return (
        <div>
           { this.state.cont }
        </div>
      )
    }
}

setState直接去那上一次的值 做操作
最后 得到了 6 因?yàn)?componentDidMount 執(zhí)行了兩次 不過 至少驗(yàn)證了 我們這個(gè)方法解決了異步連續(xù)調(diào)用的問題

然后 就是另一個(gè)問題 我們 componentDidMount 的代碼改成這樣

componentDidMount() {
  this.setState({
    cont: this.state.cont+1
  })
  console.log(this.state.cont);
}

就還是那個(gè)問題 因?yàn)?setState是異步的 所以 你在這之后打印 肯定也拿不到最新的值

我們改成這樣

componentDidMount() {
  this.setState({
    cont: this.state.cont+1
  }, () => {
      console.log(this.state.cont);
  })
}

setState其實(shí)提供了一個(gè) 修改完成后的回調(diào)
我們再回到中輸出即可