从理解render方法到VNode生成全流程详解

2023-10-28 15:19:49

揭开 React Render 方法的神秘面纱：虚拟 DOM 的幕后功臣

什么是 React 的 Render 方法？

React 的 render 方法是组件的核心，负责将组件的状态和属性转换成一个名为虚拟 DOM（VNode）的轻量级 JavaScript 对象。VNode 了 DOM 元素的结构和属性，当 render 方法被调用时，它会生成一个新的 VNode，并将其与之前创建的 VNode 进行比较。如果 VNode 发生了变化，React 就会更新 DOM 以匹配新的 VNode。

从 Render 到 VNode 的生成过程

调用 render 方法： 当组件的状态或属性发生变化时，React 会调用组件的 render 方法，该方法返回一个代表组件当前状态的 VNode。
创建 VNode： 当 render 方法返回一个 VNode 时，React 会创建一个包含以下信息的轻量级 JavaScript 对象：
- 元素类型（例如，“div”或“span”）
- 属性（例如，“id”或“class”）
- 子元素（例如，其他 VNode）
比较 VNode： 当 React 创建了一个新的 VNode 时，它会将其与之前创建的 VNode 进行比较。如果 VNode 发生了变化，React 就会更新 DOM 以匹配新的 VNode。比较 VNode 的过程是通过 diff 算法来完成的。
更新 DOM： 如果 VNode 发生了变化，React 就会更新 DOM 以匹配新的 VNode。更新 DOM 的过程是通过 patch 算法来完成的。patch 算法会将新的 VNode 与旧的 VNode 进行比较，并只更新那些发生变化的元素。

VNode 生成的示例

以下示例展示了 render 方法如何将组件状态和属性转换成 VNode：

const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.body}</p>
    </div>
  );
};

当 MyComponent 组件被渲染时，render 方法会创建一个新的 VNode：

{
  type: 'div',
  props: {
    children: [
      {
        type: 'h1',
        props: {
          children: props.title
        }
      },
      {
        type: 'p',
        props: {
          children: props.body
        }
      }
    ]
  }
}

这个 VNode 了一个 div 元素，其中包含一个 h1 元素和一个 p 元素。h1 元素的内容是组件的 title prop，p 元素的内容是组件的 body prop。

VNode 的优点

VNode 具有许多优点，包括：