解析React 虚拟DOM和Diff算法

最新推荐文章于 2025-02-07 18:46:30 发布

不负如来不负清

最新推荐文章于 2025-02-07 18:46:30 发布

阅读量519

点赞数 1

分类专栏：虚拟DOM diff算法文章标签： react.js 算法

本文链接：https://blog.youkuaiyun.com/qq_36697163/article/details/122477843

版权

本文详细解析React中的JSX、虚拟DOM及其优势。React使用虚拟DOM提高性能，通过Diff算法找出最小改动，批量更新真实DOM。文章还介绍了Diff算法的三种策略：Tree Diff、Component Diff和Element Diff，强调了Key机制在优化移动操作中的作用，以及避免使用index作为key的原因和影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、 JSX

众所周知，React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展，其本质是 createElement()方法的语法糖（语法糖：更加直观、简洁、友好）。

JSX 代码会经过babel-loader 会解析为 React.createElement()嵌套对象。React.createElement() 创建的就是一个虚拟DOM结构。

二、虚拟DOM

通过React.createElement(…)创建的虚拟DOM描述了DOM树的结构，其本质是一个轻量级的javaScript对象。该JS对象包含如下属性：

type：元素的类型，可以是原生html类型（字符串），或者自定义组件（函数或class）
key：组件的唯一标识，用于Diff算法，之后会详细介绍
ref：用于访问原生dom节点
props：传入组件的props，children是props中的一个属性，它存储了当前组件的子节点，可以是数组（多个子节点）或对象（只有一个子节点）
owner：当前正在构建的Component所属的Component
self：（非生产环境）指定当前位于哪个组件实例
_source：（非生产环境）指定调试代码来自的文件(fileName)和代码行数(lineNumber)

为更好理解，下面我们来看一组转换流程。
存在JSX代码如下：

const element = (
  <div className="title">
    <span>Hello JSX</span>
    <ul>
      <li>test1</li>
      <li>test2</li>
    </ul>
  </div>
);

通过babel-loader 解析后：

const element = React.createElement(
  "div",
  {
    className: "title" },
  React.createElement("span", null, "Hello JSX"),
  React.createElement(
    "ul",
    null,
    React.createElement("li"