渐进式剖析React源码（四）：细说beginWork

2023-11-05 06:41:17

剖析beginWork函数

在React 16中，ReactElement构成的树形结构被重构为Fiber结构。Fiber结构是一种轻量级的树形结构，它可以帮助React更有效地管理组件的状态和生命周期。

beginWork函数是React中一个非常重要的函数，它负责将ReactElement的结构转换为Fiber结构。beginWork函数首先会创建一个Fiber节点，然后遍历ReactElement的子节点，为每个子节点创建一个Fiber节点。

beginWork函数还会对Fiber节点进行一些处理，比如：

计算Fiber节点的布局信息。
为Fiber节点创建Effect列表。
将Fiber节点添加到父Fiber节点的子Fiber列表中。

剖析completeWork函数

completeWork函数是另一个非常重要的函数，它负责将beginWork函数创建的Fiber结构更新到DOM中。completeWork函数首先会遍历Fiber结构，并对每个Fiber节点进行一些处理，比如：

将Fiber节点的布局信息更新到DOM中。
执行Fiber节点的Effect列表。
将Fiber节点从父Fiber节点的子Fiber列表中移除。

completeWork函数最后会将更新后的DOM渲染到屏幕上。

总结

beginWork函数和completeWork函数是React中非常重要的两个函数，它们负责将ReactElement的结构转换为Fiber结构，并更新Fiber结构到DOM中。理解这两个函数的原理对于理解React的运行机制非常重要。

示例代码

function beginWork(fiber) {
  // 创建Fiber节点。
  const newFiber = createFiber(fiber.type);

  // 遍历ReactElement的子节点，为每个子节点创建一个Fiber节点。
  for (let i = 0; i < fiber.props.children.length; i++) {
    const child = fiber.props.children[i];
    const childFiber = createFiber(child.type);
    newFiber.child = childFiber;
  }

  // 计算Fiber节点的布局信息。
  calculateLayoutInfo(newFiber);

  // 为Fiber节点创建Effect列表。
  createEffectList(newFiber);

  // 将Fiber节点添加到父Fiber节点的子Fiber列表中。
  fiber.child = newFiber;

  // 返回Fiber节点。
  return newFiber;
}

function completeWork(fiber) {
  // 将Fiber节点的布局信息更新到DOM中。
  updateLayoutInfo(fiber);

  // 执行Fiber节点的Effect列表。
  executeEffectList(fiber);

  // 将Fiber节点从父Fiber节点的子Fiber列表中移除。
  fiber.parent.child = null;

  // 返回Fiber节点。
  return fiber;
}