解析React 虚拟DOM和Diff算法

一、 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", null, "test1"