React的diff算法

React的diff算法是用于在虚拟DOM中比较新旧两棵树的算法，从而确定需要更新哪些部分，以最小化实际DOM操作的数量。

React的diff算法主要包括三个步骤：

1. 生成虚拟DOM树

React中的每个组件都有一个虚拟DOM树，它是一个轻量级的JavaScript对象树，对应于实际DOM的结构。当组件状态发生变化时，React会生成一个新的虚拟DOM树。

2. 比较两棵树

React的diff算法会逐层比较新旧两棵树的节点，找出它们之间的差异。比较的过程是深度优先的，从根节点开始，逐层比较子节点。

3. 更新实例DOM

在找到差异后，React会根据差异的类型执行相应的DOM操作，以更新实际DOM。这些操作可能包括添加、移动、删除节点以及更新节点的属性。

React中Key的作用

在比较过程中，React还会利用节点上的key属性来确定节点的唯一性。Key的作用是帮助React识别哪些节点是新增的、删除的或者移动的。在列表渲染中特别有用，可以避免出现不必要的DOM更新操作。

React中diff算法中递归对比是如何实现的呢？

React的diff算法使用递归的方法，从根节点开始，逐层比较新旧虚拟DOM树的节点。每次对比都会根据节点类型，属性和子节点来确定需要进行的更新操作。

diff算法基于三个约定：

1. key相同
2. type相同
3. 同层级

否则都算是新节点

核心概念：

• 树分解：将虚拟DOM树分解为子树，对每个子树分别进行对比
• 分层对比：从根节点开始，逐层对比每个节点及其子节点
• key属性：在列表中渲染时，React使用Key属性来优化对比进程，确保相同Key的节点被认是相同节点。

具体实现步骤

步骤1：比较根节点

首先比较根节点的类型。如果新旧节点类型不同，则完全替换根节点。如果类型相同，则进行属性和子节点的进一步比较。

function diff(oldNode, newNode) {
  if (oldNode.type !== newNode.type) {
    // 类型不同，完全替换
    return replaceNode(oldNode, newNode);
  } else {
    // 类型相同，比较属性和子节点
    updateProps(oldNode, newNode);
    diffChildren(oldNode, newNode);
  }
}

步骤2：比较属性

比较新旧节点的属性，并生成相应的属性更新操作。

function updateProps(oldNode, newNode) {
  const oldProps = oldNode.props;
  const newProps = newNode.props;

  // 遍历新属性，更新或添加属性
  for (let key in newProps) {
    if (newProps[key] !== oldProps[key]) {
      updateProp(oldNode, key, newProps[key]);
    }
  }

  // 删除旧属性中不存在于新属性中的属性
  for (let key in oldProps) {
    if (!(key in newProps)) {
      removeProp(oldNode, key);
    }
  }
}

步骤3：比较子节点

对子节点进行递归比较，根据需要添加、删除或更新子节点。

function diffChildren(oldNode, newNode) {
  const oldChildren = oldNode.children;
  const newChildren = newNode.children;

  // 比较子节点数量
  const max = Math.max(oldChildren.length, newChildren.length);

  for (let i = 0; i < max; i++) {
    diff(oldChildren[i], newChildren[i]);
  }
}

步骤4：列表渲染优化

在列表渲染中，React使用Key属性进行优化。Key属性唯一标识每个节点，确保在节点顺序变化时仍能正确识别和更新节点。

function diffChildren(oldNode, newNode) {
  const oldChildren = oldNode.children;
  const newChildren = newNode.children;
  const oldKeys = {};
  const newKeys = {};

  // 创建旧子节点的 key 映射
  oldChildren.forEach((child, index) => {
    if (child.key != null) {
      oldKeys[child.key] = index;
    }
  });

  // 比较新子节点
  newChildren.forEach((child, index) => {
    const key = child.key;
    if (key != null) {
      newKeys[key] = index;
      const oldIndex = oldKeys[key];
      if (oldIndex != null) {
        diff(oldChildren[oldIndex], child);
      } else {
        // 新增节点
        addChild(child);
      }
    } else {
      // 处理没有 key 的节点
      diff(oldChildren[index], child);
    }
  });

  // 删除不存在于新节点中的旧节点
  oldChildren.forEach((child, index) => {
    if (child.key != null && !(child.key in newKeys)) {
      removeChild(child);
    }
  });
}