React render阶段
流程
递阶段
首先从rootFiber
开始向下深度优先遍历。为遍历到的每个Fiber
节点调用beginWork
方法。该方法会根据传入的Fiber
节点创建子Fiber
节点,并将这两个Fiber
节点连接起来。当遍历到叶子节点(即没有子组件的组件)时就会进入“归”阶段。
归阶段
在“归”阶段会调用completeWork
处理Fiber
节点。当某个Fiber节点执行完completeWork
,如果其存在兄弟Fiber节点(即fiber.sibling !== null
),会进入其兄弟Fiber
的“递”阶段。如果不存在兄弟Fiber
,会进入父级Fiber
的“归”阶段。“递”和“归”阶段会交错执行直到“归”到rootFiber
。至此,render
阶段的工作就结束了。
参考资料
[1]React技术揭秘