From b433a904858c16780cb4ebb1c6c8a45cbf878d22 Mon Sep 17 00:00:00 2001 From: YuJian Date: Mon, 9 May 2022 16:49:19 +0800 Subject: [PATCH] vault backup: 2022-05-09 16:49:19 --- .../React 的深入探索 - createWorkInProgress.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - createWorkInProgress.md b/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - createWorkInProgress.md index a365b5d..da62715 100644 --- a/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - createWorkInProgress.md +++ b/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - createWorkInProgress.md @@ -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 节点，其他和首屏渲染是一样的，这里不多赘述 \ No newline at end of file +然后返回创建好的 WorkInProgress Fiber 树，至此 createWorkInProgress 的逻辑就结束了。 \ No newline at end of file