美文网首页
React的setState原理

React的setState原理

作者: 中石化局长 | 来源:发表于2019-06-11 11:48 被阅读0次

    https://www.jianshu.com/p/1e7e956ec1ee


    https://segmentfault.com/a/1190000017831695


    在 合成事件 和 生命周期钩子(除 componentDidUpdate) 中,setState是"异步"的;

    原因: 因为在setState的实现中,有一个判断: 当更新策略正在事务流的执行中时,该组件更新会被推入dirtyComponents队列中等待执行;否则,开始执行batchedUpdates队列更新;

    在生命周期钩子调用中,更新策略都处于更新之前,组件仍处于事务流中,而componentDidUpdate是在更新之后,此时组件已经不在事务流中了,因此则会同步执行;

    在合成事件中,React 是基于事务流完成的事件委托机制实现,也是处于事务流中;

    问题: 无法在setState后马上从this.state上获取更新后的值。

    解决: 如果需要马上同步去获取新值,setState其实是可以传入第二个参数的。setState(updater, callback),在回调中即可获取最新值;

    在 原生事件 和 setTimeout 中,setState是同步的,可以马上获取更新后的值;

    原因: 原生事件是浏览器本身的实现,与事务流无关,自然是同步;而setTimeout是放置于定时器线程中延后执行,此时事务流已结束,因此也是同步;

    相关文章

      网友评论

          本文标题:React的setState原理

          本文链接:https://www.haomeiwen.com/subject/whwffctx.html