前言:
react作为一个通过state构建ui的库,其本身内部主要存在schedule、render、commit三个阶段.
本次主要通过图的形式,来总结归纳
基于
schedule的流程
lane模型下的执行流程
render阶段(对虚拟DOM打标记)的执行流程
通过遍历的方法实现可中断的递归,主要分为"递"和"归"
"递"阶段会从HostRootFiber开始向下以DFS的方式遍历,为"遍历到的每个fiberNode"执行beginWork方法
当遍历到叶子元素,就进入"归"阶段
"归"阶段会调用completeWork方法处理fiberNode.当某个fiberNode执行完completeWork方法后,如果其存在兄弟fiberNode,则进入父fiberNode的"归"阶段
如果不存在兄弟fiberNode,则进入父fiberNode的"归"阶段
"递"阶段和"归"阶段会交错执行直至HostRootFiber的"归"阶段
fiber架构
commit阶段
参考资源:React设计原理(卡颂)
