美文网首页
React 18 源代码学习 15 useEffect 的触发

React 18 源代码学习 15 useEffect 的触发

作者: 吴摩西 | 来源:发表于2022-09-27 20:44 被阅读0次

    作为 React 的开发者,我们知道 useLayoutEffect 是在 render 的 task 内执行的,useEffect 是在下一个 task 执行的,可以参考
    React 18 源代码学习 14 commitLayoutEffectOnFiber

    image.png

    useLayoutEffectrender 阶段是在同一个 Javascript 的调用栈 ( 图中黄色的 Javascript 阶段 )中,此时虽然 DOM 结构已经生成,从 DOM api 获取 DOM 结构也是 React commit 后的的结构,然而浏览器尚且没有得到实际渲染的时机。此 task 结束后,浏览器得到时机进行实际的渲染,渲染后的下一个 Javascript task ( 即执行完 Style, Layout, Paint, Composite 后的下一个 Javascript 阶段 ) 才得以有时机执行 useEffect 的回调。

    触发时机

    useEffect 的调用的触发时机是什么时候呢,参考
    React 18 源代码学习 12 commit,通过 debug 发现:在 commit 的阶段开始 flushPassiveEffects 时,就安排了 useEffect 的回调,然后才会执行后续的 commit 阶段。

    触发方式

    具体安排的方式,可以参考 React 18 源代码学习笔记 4 消息循环 (MessageLoop),更详细的流程如下:

    Screen Shot 2022-09-24 at 20.12.17.png

    虽然实际出发的位置和出发的回调不同,不过基本流程应该相同。


    Screen Shot 2022-09-24 at 20.18.29.png

    相关文章

      网友评论

          本文标题:React 18 源代码学习 15 useEffect 的触发

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