从源码层面理解 React 的 Diff 算法

2024-02-15 06:36:35

React 的 Diff 算法是一种高效的对比算法，用于比较两个虚拟 DOM 树之间的差异，并只更新有变化的节点。这使得 React 能够在更新 UI 时只进行必要的更新，从而提高性能。

单节点 diff

单节点 diff 是指对比两个虚拟 DOM 树中的两个节点。React 会首先比较这两个节点的类型，如果类型不同，则直接替换掉旧节点。如果类型相同，则会比较这两个节点的属性，如果属性不同，则更新属性。

function reconcileSingleElement(returnFiber, currentFirstChild, element) {
  const key = element.key;
  let child = currentFirstChild;
  while (child !== null) {
    if (child.key === key) {
      if (child.type === element.type) {
        return updateElement(element, child);
      } else {
        return replaceElement(element, child);
      }
    }
    child = child.sibling;
  }
  return createElement(element);
}

多节点 diff

多节点 diff 是指对比两个虚拟 DOM 树中的多个节点。React 会首先比较这两个节点的长度，如果长度不同，则直接替换掉旧节点。如果长度相同，则会比较这两个节点的类型，如果类型不同，则直接替换掉旧节点。如果类型相同，则会比较这两个节点的属性，如果属性不同，则更新属性。

function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren) {
  let resultingFirstChild = null;
  let previousNewFiber = null;

  let oldFiber = currentFirstChild;
  let newFiber = newChildren;

  while (oldFiber !== null && newFiber !== null) {
    if (oldFiber.key === newFiber.key) {
      if (oldFiber.type === newFiber.type) {
        resultingFirstChild = updateElement(newFiber, oldFiber);
      } else {
        resultingFirstChild = replaceElement(newFiber, oldFiber);
      }
      previousNewFiber = resultingFirstChild;
      oldFiber = oldFiber.sibling;
      newFiber = newFiber.sibling;
    } else {
      resultingFirstChild = insertElement(newFiber);
      newFiber = newFiber.sibling;
    }
  }

  while (newFiber !== null) {
    resultingFirstChild = insertElement(newFiber);
    newFiber = newFiber.sibling;
  }

  while (oldFiber !== null) {
    oldFiber = deleteChild(oldFiber);
  }

  return resultingFirstChild;
}