|
|
|
|
@ -75,11 +75,3 @@ switch (workInProgress.tag) {
@@ -75,11 +75,3 @@ 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 节点，其他和首屏渲染是一样的，这里不多赘述 |
YuJian
3 years ago