React中的setState

疑惑：为什么组件中没有实现setState方法，但我们却可以调用？
因为setState 是从 Component 类中继承过来的

image.png

为什么 setState 是异步更新的？

在react中每次state更新都会调用render函数重新渲染页面，如果每调用一次setState都进行一次更新，那么将会频繁的调用render函数，这样效率会很低。最好的方法是获取多个更新后批量更新。
或者可以让state同步更新不调用render这样就不会有效率问题了，但是会带来另一个问题，会造成state与props中的数据不一致，这样造成的bug更多。因为React只有当render调用时子组件中的props才会更新。

如何获取state中异步更新后的数据？

使用setState中的会滴哦啊函数

this.setState({},()=>{})   // 回调函数类似与vue中nextTick的作用

使用生命周期函数 CompomentDidUpdate,每次render函数调用后都会调用此函数，所以此函数中state是最新的

setState同步情况

原生Dom事件和setTime中

setState 数据的合并

// 源码中是这样写的，所以setState更新时可以只写需要更新的元素，而不需要把所有元素都写上
 Object.assign({},this.state,{message:'hello'})

setState 合并

setState的第一个参数可以是一个对象也可以是一个函数，当是函数时，会传入一个preState

this.setState({
  count: count++
})
this.setState({
  count: count++
}) // 当传入的是一个对象时，count会合并，只加一次

this.setState((preState, props)=>{
  return {
    count : preState + 1
  }
})
this.setState((preState, props)=>{
  return {
    count : preState + 1
  }
})   // 这样就可以实现count的累加， count = 2