React | setState,你到底想怎么样?!

react

使用过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

回到顶部