React 调和算法深度解析：7kms/react-illustration-series 项目详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00810/article/details/148443129

React 调和算法深度解析：7kms/react-illustration-series 项目详解

react-illustration-series 图解react源码, 用大量配图的方式, 致力于将react原理表述清楚. 项目地址: https://gitcode.com/gh_mirrors/re/react-illustration-series

前言

在 React 的渲染机制中，调和（Reconciliation）算法扮演着至关重要的角色。本文将从技术专家的角度，基于 7kms/react-illustration-series 项目中的资料，深入剖析 React 的调和算法实现原理，帮助开发者更好地理解 React 的核心工作机制。

什么是调和算法

调和算法是 React 在构建 Fiber 树过程中，用于比较新旧节点并决定哪些节点可以复用的核心算法。它的主要职责包括：

识别新增、移动和删除的节点，并设置相应的标记（Placement 或 Deletion）
将被删除的 Fiber 节点添加到父节点的 effects 链表中

算法特点

React 调和算法具有以下显著特点：

高效性：采用 O(n) 复杂度的算法，从上至下比较整个树形结构
智能复用：尽可能复用已有 DOM 节点，减少不必要的创建和销毁
渐进式更新：通过 Fiber 架构实现可中断的渐进式更新

核心比较逻辑

调和算法的比较对象不是两棵 Fiber 树，而是旧的 Fiber 节点与新的 ReactElement 对象。比较结果会生成新的 Fiber 子节点。

单节点比较

单节点比较的逻辑相对简单：

function reconcileSingleElement(returnFiber, currentFirstChild, element, lanes) {
  const key = element.key;
  let child = currentFirstChild;
  
  while (child !== null) {
    if (child.key === key) {
      if (child.elementType === element.type) {
        // 匹配成功，复用节点
        deleteRemainingChildren(returnFiber, child.sibling);
        const existing = useFiber(child, element.props);
        existing.ref = coerceRef(returnFiber, child, element);
        existing.return = returnFiber;
        return existing;
      }
      // 类型不匹配，删除剩余节点
      deleteRemainingChildren(returnFiber, child);
      break;
    } else {
      // key不匹配，删除当前节点
      deleteChild(returnFiber, child);
    }
    child = child.sibling;
  }
  
  // 新建节点
  const created = createFiberFromElement(element, returnFiber.mode, lanes);
  created.ref = coerceRef(returnFiber, currentFirstChild, element);
  created.return = returnFiber;
  return created;
}

单节点比较的关键点：

首先比较 key 值
key 相同再比较 elementType
都匹配则复用节点，否则创建新节点

多节点比较（数组/可迭代节点）

多节点比较更为复杂，分为两个主要阶段：

function reconcileChildrenArray(
  returnFiber,
  currentFirstChild,
  newChildren,
  lanes
) {
  // 第一阶段：遍历最长公共序列
  for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
    // 比较并可能复用节点
  }
  
  // 第二阶段：处理剩余非公共序列
  const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
  for (; newIdx < newChildren.length; newIdx++) {
    // 尝试复用旧节点
  }
  
  // 标记需要删除的节点
  existingChildren.forEach(child => deleteChild(returnFiber, child));
}

第一阶段：公共序列处理

算法首先遍历新旧节点序列的最长公共部分（key 相同的部分），这部分节点可以直接复用。处理逻辑包括：

使用 updateSlot 函数比较新旧节点
如果 key 不同则中断循环
记录节点位置信息

第二阶段：非公共序列处理

对于剩余的非公共序列部分，算法会：

将剩余的旧 Fiber 节点存入 Map 以便快速查找
遍历新节点序列，尝试从 Map 中找到可复用的节点
标记无法复用的旧节点为删除

实际案例解析

假设有以下新旧节点序列：

旧序列：A → B → C → D
新序列：A → B → E → C → X → Y

处理过程

第一阶段：
- 匹配公共序列 A 和 B
- 生成可复用的 fiber(A) 和 fiber(B)
第二阶段：
- 处理剩余新序列 E, C, X, Y
- fiber(E) 和 fiber(C) 可以复用（C 需要标记移动）
- fiber(X) 和 fiber(Y) 需要新建
- 旧序列中的 fiber(D) 需要删除