React 源码阅读：虚拟 DOM 的初始化

2023-12-16 19:42:34

虚拟 DOM 的创建

React 使用虚拟 DOM 来表示界面的状态。虚拟 DOM 是一个轻量级的对象，它包含了界面的所有元素和它们的属性。当界面的状态发生改变时，React 会创建一个新的虚拟 DOM，并使用 Diff 算法来计算出需要更新的组件。

// react-dom/src/client/ReactDOM.js
function createElement(type, props, ...children) {
  let element;

  if (typeof type === 'string') {
    element = new DOMElement(type, props, children);
  } else {
    element = new DOMElementWrapper(type, props, children);
  }

  return element;
}

在 React 中，创建一个虚拟 DOM 元素非常简单。只需要调用 createElement 函数，传入元素的类型、属性和子元素即可。createElement 函数会根据传入的参数创建一个新的虚拟 DOM 元素。

Diff 算法

Diff 算法是 React 用于计算需要更新的组件的算法。Diff 算法通过比较新旧虚拟 DOM 的差异来计算出需要更新的组件。

// react-dom/src/client/ReactFiberReconciler.js
function diffElement(prevChild, nextChild, flags) {
  const prevProps = prevChild.memoizedProps;
  const nextProps = nextChild.pendingProps;

  switch (nextChild.tag) {
    case IndeterminateComponent:
    case FunctionComponent:
    case SimpleMemoComponent:
    case ClassComponent: {
      // ...
    }
    // ...

    default: {
      // ...
    }
  }

  return diffProperties(prevProps, nextProps, flags);
}

Diff 算法的实现非常复杂，但它的基本原理却很简单。Diff 算法首先会比较新旧虚拟 DOM 元素的类型。如果类型不同，则新元素将替换旧元素。如果类型相同，则 Diff 算法会比较新旧虚拟 DOM 元素的属性。如果属性不同，则 Diff 算法会更新旧元素的属性。

Fiber 架构

Fiber 架构是 React 用于管理组件更新的架构。Fiber 架构将组件的更新任务分解成一个个小的任务，然后将这些任务放入一个队列中。React 会按照队列的顺序执行这些任务，从而确保组件的更新能够以正确的方式进行。

// react-dom/src/client/ReactFiberWorkLoop.js
function performUnitOfWork(unitOfWork) {
  // ...

  // Perform the begin phase for this unit of work.
  const next = beginWork(unitOfWork, nextRenderExpirationTime);

  // ...

  return next;
}

Fiber 架构的引入极大地提高了 React 的性能。Fiber 架构使 React 能够更有效地管理组件的更新任务，从而减少不必要的重渲染。