setState 说明

1.1

此处更新 setState ⚠️：异步更新数据。 由于是异步的，紧跟其后去使用 this.state.count 还是默认值，并不是 setState 之后的值。

this.setState({
   // 1 + 1
    count: this.state.count + 1
})
console.log("count1", this.state.count) // 1
           

注意：

使用该语法时，后面的 setState() 不要依赖于前面的 setState()

原因：

因为 setState 是异步的，上面代码中可以看出，即使是 setState 执行了，

打印的还是 1，那么后面再执行 setState，相当于还是 1 + 1

this.setState({
   // 1 + 1
    count: this.state.count + 1
})
console.log("count1", this.state.count) // 1

this.setState({
   // 1 + 1
    count: this.state.count + 1
})
console.log("count2", this.state.count) // 1
           

注意：

当然，是可以多次调用 setState(),但只会触发一次重新渲染（render）

原因：

为什么这么做呢？其实是为了性能的考虑，如果 setState 一次，就 render 一次，那么性能是很差的。所以，会把多次调用的 setState() 汇总合并，最后一次性的把结果渲染的页面上，只 render 一次。这样的性能会高很多。

1.2

上面的异步问题，如果依赖前面的 setState会出现异步问题 那么，推荐使用

setState((state, props) => {}) 
           

参数state：

表示最新的state

参数props：

表示最新的props

注意：

这种语法也是异步更新 state 的

this.setState((state, props) => {
// 此时 state 是默认值
  return {
      // 1 + 1
      count: state.count + 1  // 2
  }
})
           

那么 setState((state, props) => {}) 与 this.setState({}) 有什么区别呢？

这个语法（setState((state, props) => {}) ）跟上面的语法（this.setState({}) ）的区别是参数是个回调函数，而回调函数中的参数 state 实际上表示的是最新的状态的。

什么意思呢？就是调用两次 setState() 的时候，第一次 state 是默认值，但第二次就不是默认值了，而是上一次 setState 之后的值

this.setState((state, props) => {
   // 此时 state 是默认值
    return {
        // 1 + 1
        count: state.count + 1  // 2
    }
})

this.setState((state, props) => {
    // 这次 state 是拿到调用之后的结果
    console.log('第二次调用',state)
    // 此时 state 的值是上面 setState 之后的值
    return {
        // 2 + 1
        count: state.count + 1  // 3
    }
})
           

1.3

setState 第二个参数

在状态更新（页面完成重新渲染）后立即执行某个操作

setState(undater,[callback])

this.setState((state, props) => {
 return {
        // 1 + 1
        count: state.count + 1 // 2
    }
},() => {//状态更新后并且更新渲染后，立即执行
    console.log("状态更新完成：", this.state.count) // 2
    //console.log(document.getElementById("title").innerHTML)
})
           

以上具体内容可去 gitHub 看代码更清晰