有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

react setstate原理(详解setState异步原理与更新策略)

前端框架 炮渣日记 3周前 (11-22) 16次浏览 已收录 0个评论 扫描二维码

setState的关键点

  1. setState不会立刻改变React组件中state的值
  2. setState通过引发一次组件的更新过程来引发重新绘制

重绘指的就是引起React的更新生命周期函数4个函数:

  • shouldComponentUpdate(被调用时this.state没有更新;如果返回了false,生命周期被中断,虽然不调用之后的函数了,但是state仍然会被更新)
  • componentWillUpdate(被调用时this.state没有更新)
  • render(被调用时this.state得到更新)
  • componentDidUpdate

3.多次setState函数调用产生的效果会合并

this.setState({name: ‘Pororo’})

this.setState({age: 20})

this.setState({name: ‘Pororo’,age: 20})

上面两块代码的效果是一样的。如果每次调用都引发一次生命周期更新,那性能就会消耗很大了。所以,React会将多个this.setState产生的修改放进一个队列里,等差不多的时候就会引发一次生命周期更新。

结论

在React中,如果是由React引发的事件处理(比如:onClick引发的事件处理),调用setState不会同步更新this.state,除此之外的setState调用会同步执行this.setState。 即绕过React通过addEventListener直接添加的事件处理函数和setTimeout/setInterval产生的异步调用。

react setstate原理(详解setState异步原理与更新策略)

每次setState产生新的state会依次被存入一个队列,然后会根据isBathingUpdates变量判断是直接更新this.state还是放进dirtyComponent里回头再说。isBatchingUpdates默认是false,也就表示setState会同步更新this.state。但是,当React在调用事件处理函数之前就会调用batchedUpdates,这个函数会把isBatchingUpdates修改为true,造成的后果就是由React控制的事件处理过程setState不会同步更新this.state。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址