Skip to main content
编译 JSX

Babel 编译结果

Babel 可以通过特定的插件（如 @babel/plugin-transform-react-jsx）将 JSX 语法转换为 React.createElement 调用，例如：

<div>
  < img src="avatar.png" className="profile" />
  <Hello />
</div>
SewenAbout 3 minReactReact组件渲染
DOM 渲染

React DOM 的渲染采用 render 方法

虚拟 DOM 转成 真实 DOM 流程

创建虚拟 DOM

假设需要渲染如下真实 DOM：

<ul id="list">
  <li class="item">Item1</li>
  <li class="item">Item2</li>
  <li class="item">Item3</li>
</ul>
SewenAbout 6 minReactReact组件渲染
组件渲染流程

React 的渲染工作流是值从组件数据改变到组件实际更新发生的过程。

  1. 开发者编写 JSX 代码：

    • 开发者使用 JSX 语法编写用户界面的代码。
    • JSX 允许开发者在 JavaScript 代码中编写类似 HTML 的结构，从而创建 React 元素和组件。

  2. Babel 编译：

    • JSX 代码需要被转换成浏览器可以理解的 JavaScript 代码。
    • Babel 是一个 JavaScript 编译器，它可以将现代 JavaScript 代码和 JSX 转换为向后兼容的 JavaScript 代码。
    • Babel 会将 JSX 标签转换为 React.createElement 调用。例如，<div>Hello, world!</div> 会被转换成 React.createElement('div', null, 'Hello, world!')。

  3. React.createElement 调用：

    • 转换后的 JavaScript 代码会使用 React.createElement 方法来创建 React 元素。这些元素是描述 UI 树的 JavaScript 对象。

  4. ReactElement 调用：

    • React.createElement 方法返回一个 ReactElement 实例，它是 React 元素的内部表示。
    • ReactElement 包含了创建真实 DOM 节点所需的所有信息，如标签名、属性和子元素。

  5. 作为参数处理：

    • ReactElement 实例会被作为参数传递给 React 的渲染系统。React 会使用这些元素来构建虚拟 DOM。

  6. “虚拟 DOM”：

    • 虚拟 DOM 是一个轻量级的 JavaScript 对象，它表示真实 DOM 的状态。
    • React 使用虚拟 DOM 来提高性能，因为它允许 React 在内存中进行 UI 更新，而不是直接操作真实 DOM。

  7. ReactDoM.render()：

    • ReactDOM.render() 方法是将虚拟 DOM 渲染到真实 DOM 的入口点。这个方法接收一个 ReactElement 和一个 DOM 节点的选择器或引用作为参数。
    • React 会使用 Diff 算法比较新旧虚拟 DOM 树的差异，并计算出最小的更新操作。

  8. 真实 DOM 传入：

    • 根据计算出的更新操作，React 会更新传入的 DOM 节点。这个过程可能包括创建新的 DOM 节点、修改现有节点的属性或样式、删除不再需要的节点等。
    • 最终，更新后的真实 DOM 会反映在浏览器中，用户可以看到更新后的界面。
SewenAbout 4 minReactReact组件渲染
Virtual DOM

virtual dom 是单独存在的一个库， github: https://github.com/Matt-Esch/virtual-dom

Real DOM

在认识 virtual dom 之前，先认识一下 Real DOM：

Real DOM，真实 DOM，意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实 DOM 结构，如下：

Real DOM（真实DOM）是浏览器原生提供的，它表示当前页面的实际HTML结构。当页面中的数据发生变化时，Real DOM 会进行重新渲染和更新。它是我们与网页进行交互的基础，通过操作Real DOM，我们可以改变网页的内容、样式和行为。

SewenAbout 20 minReactReact组件渲染