React | setState,你到底想怎么样?!
使用过React的小伙伴们,面试中经常会被问到SetState。
各种角度来探测你对setState的理解,认知!有时候可能面试紧张到不知所云,有时候可能压根儿不知道面试官想考你什么,总体来说,还是对setState没有驾轻就熟
、玩转自如
的程度(本着从自身出发找问题的原则才会进步,毕竟。。。面试机会错过就很难补救了)
结合面试问题,对setState做一个阐述~
1.setState()之后发生了什么?
先盗一张常见的解析图
在React的setState函数实现中,会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列 中。isBatchingUpdates 变量默认是false,也就表示setState会同步更新this.state,但是有一个函数batchedUpdates会把isBatchingUpdates修改为true,而当React在调用事件处理函数之前就会调用这个batchedUpdates,造成的后果,就是由React控制的事件处理过程setState不会同步更新this.state。
总结:由 React 控制的事件处理过程 setState 不会同步更新 this.state!
也就是说,在 React 控制之外的情况, setState 会同步更新 this.state!
2.具体生命周期函数中执行setState会发生什么?
无意义使用
:componentWillMount(state会合并到初始this.state中),componentWillUnmount(组件卸载改变state无意义);有条件使用
:componentDidUpdate(更新完再次触发某条件进行再更新,需控制条件);禁止使用
:componentWillUpdate,shouldComponentUpdate;(更新未完成状态下持续触发更新会导致页面一直嵌套在更新逻辑中,崩溃)正常使用
:componentWIllReceiveProps(合并state,等render时统一更新),componentDidMount(正常触发更新流程)。
3.componentDidMount中setState后直接console出this.state的结果如何?
因为此时isBatchingUpdates
处于true状态下,所以setState只是收集合并state,当前打印的还是未改变的this.state
。
但是,如果是像原生事件(如addEventListener)或setTimeout、setInterval这样的异步执行后的setState将会直接更新this.state。此时打印的this.state将会输出更新后的state。
以上是 React | setState,你到底想怎么样?! 的全部内容, 来源链接: utcz.com/z/381261.html