|
|
|
@ -74,12 +74,4 @@ switch (workInProgress.tag) {
@@ -74,12 +74,4 @@ switch (workInProgress.tag) {
|
|
|
|
|
} |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
然后返回创建好的 WorkInProgress Fiber 树,至此 createWorkInProgress 的逻辑就结束了。 |
|
|
|
|
|
|
|
|
|
React 的首屏渲染时会交由 createWorkInProgress 函数生成一个 WorkInProgress Fiber 节点,这个节点就是 FiberNode,createWorkInProgress 接收两个参数,分别是 current 和 pendingProps,这里的 pendingProps 是组件的属性 |
|
|
|
|
因为传入的是 `current Fiber` 树,所以 `createWorkInProgress` 内会从 `current` 的 `alternate` 取出中取出与之链接的 `WorkInProgress Fiber` 节点,并对其做空值判断,因为对于首屏渲染而言,`WorkInProgress` 是不存在的,所以会走到不存在 `WorkInProgress` 的逻辑,在这里也就是调用 `createFiber` 函数,这个函数会更加传递的参数 `new` 一个 Fiber 的实例,其内部并没有什么复杂的逻辑,而是对 Fiber 节点的属性进行了初始化,`createFiber` 返回之后,会对返回的 FiberNode 节点进行赋值,复用 `current FiberNode` 节点的内容,并对它们各自的 `alternate` 进行赋值,双向链接 |
|
|
|
|
`createWorkInProgress` 之后,Fiber 的操作就会交由 `beginWork` 和 `completeWork` 开始正式的递归 |
|
|
|
|
|
|
|
|
|
### createWorkInProgress |
|
|
|
|
|
|
|
|
|
还是交由 createWorkInProgress 这个函数,这个函数会从 current 中取出 alternate 属性,用于判断是否已经存在 WorkInProgress 树,在本次更新,当前的 current 就是上一次渲染的 WorkInProgress,首屏渲染完成之后,实际上只渲染完成了一棵树,但是这次的 WorkInProgress 并不会走等于 null 的逻辑,因为在首屏渲染的时候,那个还是 current 的 WorkInProgress 实际上已经有一个 Fiber 节点了,那就是 FiberNode ,所以在这次渲染,它也还是有那一个 FiberNode 的,所以会走不为空的逻辑:复用现有的 Fiber 节点,其他和首屏渲染是一样的,这里不多赘述 |
|
|
|
|
然后返回创建好的 WorkInProgress Fiber 树,至此 createWorkInProgress 的逻辑就结束了。 |