【前端面试】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

你可能感兴趣的:(前端面试专栏,前端,面试,react.js)