React中的setState

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


image.png

为什么 setState 是异步更新的?

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

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

  1. 使用setState中的会滴哦啊函数
this.setState({},()=>{})   // 回调函数类似与vue中nextTick的作用
  1. 使用生命周期函数 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。