【前端面试】React深度学习(下)
render阶段:构建Fiber树
Fiber节点是如何被创建并构建Fiber树的
render阶段的工作可以分为“递”阶段和“归”阶段。
“递”阶段会执行beginWork: 根据传入的Fiber节点创建子Fiber节点,并将这两个Fiber节点连接起来。
当遍历到叶子节点(即没有子组件的组件)时就会进入“归”阶段。
“归”阶段会执行completeWork
beginWork
current:当前组件对应的Fiber节点在上一次更新时的Fiber节点,即workInProgress.alternate
workInProgress:当前组件对应的Fiber节点
renderLanes:优先级相关,在讲解Scheduler时再讲解
通过current === null ?来区分组件是处于mount还是update。
基于此原因,beginWork的工作可以分为两部分:
update时:如果current存在,在满足一定条件时可以复用current节点,这样就能克隆current.child作为workInProgress.child,而不需要新建workInProgre