该函数的功能是创建一个新的 fiber 节点作为当前 fiber 节点的 workInProgress。

执行过程如下:

  1. 首先,获取当前 fiber 节点的 alternate 节点,如果 alternate 节点为 null,则说明当前 fiber 节点是第一次渲染,需要创建一个新的 workInProgress 节点。
  2. 如果 alternate 节点为 null,则创建一个新的 fiber 节点,类型和属性与当前节点相同,并将其设置为当前 fiber 节点的 alternate 节点。同时,将当前节点设置为新创建的 workInProgress 节点的 alternate 节点。
  3. 如果 alternate 节点存在,则表示当前 fiber 节点已经有一个 workInProgress 节点,直接将新的属性 (pendingProps) 赋值给 workInProgress 节点即可。
  4. 重置 workInProgress 节点的 effect tag 为 NoFlags,清空 effects 链表。
  5. 复制当前 fiber 节点的一些属性到 workInProgress 节点,如 childLanes、lanes、child、memoizedProps、memoizedState、updateQueue 等。
  6. 克隆当前 fiber 节点的 dependencies 对象到 workInProgress 节点的 dependencies 属性。
  7. 最后,将 workInProgress 节点的一些属性设置为当前 fiber 节点的对应属性,如 sibling、index、ref 等。
  8. 返回新创建的 workInProgress 节点。
React Fiber 架构:创建 WorkInProgress 节点 - createWorkInProgress 函数解析

原文地址: https://www.cveoy.top/t/topic/qmNU 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录