从零开始手写React之初探初始渲染

2024-02-19 05:50:57

React 作为构建用户界面的主流 JavaScript 库，其虚拟 DOM 的高效更新机制是其广受欢迎的关键原因之一。为了深入理解 React 的工作机制，我们可以尝试手动模拟一个简单的 React 应用，并着重分析其初始渲染过程。

初始渲染是 React 应用生命周期中至关重要的环节，它发生在应用首次加载并将内容渲染到浏览器 DOM 的时候。在这个过程中，React 会创建一个虚拟 DOM，作为真实 DOM 的轻量级副本。接着，React 会比较虚拟 DOM 和真实 DOM 的差异，并只更新那些需要改变的部分，从而实现高效的 UI 更新。

组件和生命周期

React 应用是由一个个独立的组件构成的，每个组件就像一块积木，可以被反复使用。每个组件都有一个 render 方法，它负责返回需要渲染的元素。除此之外，组件还拥有一些生命周期方法，允许开发者在组件的不同阶段（例如组件挂载或卸载时）执行特定的操作。

模拟初始渲染

为了更好地理解初始渲染，我们来构建一个简单的 React 应用，它只显示一条信息。

// App.js
function App() {
  const message = "Hello, React!";

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

步骤分解

创建组件: 我们首先创建了一个名为 App 的组件，它非常简单，只包含一个变量 message 和一个用于显示该变量的 div 元素。
渲染组件: 当这个应用运行时，React 会调用 App 组件的 render 方法。render 方法返回一个 JSX 元素，它了需要渲染的 UI 结构。
创建虚拟 DOM: React 会根据 render 方法返回的 JSX 元素创建一个虚拟 DOM。虚拟 DOM 是一个 JavaScript 对象，它以树形结构表示了 UI 的结构和内容。
比较虚拟 DOM 和真实 DOM: 由于这是初始渲染，真实 DOM 还是空的。React 会将虚拟 DOM 和空的真实 DOM 进行比较，发现需要将整个虚拟 DOM 的内容渲染到真实 DOM 中。
更新真实 DOM: React 会将虚拟 DOM 中的元素创建成对应的真实 DOM 节点，并将它们添加到浏览器页面中。在这个例子中，React 会创建一个 div 元素和一个 h1 元素，并将它们添加到页面中。

状态更新

如果我们想要改变页面上的内容，例如将 message 的值改为 "Hello, World!"，我们需要使用 React 的状态管理机制。

// App.js
import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("Hello, React!");

  const handleClick = () => {
    setMessage("Hello, World!");
  };

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleClick}>Update Message</button>
    </div>
  );
}

在这个例子中，我们使用了 useState 钩子来管理 message 的状态。当用户点击按钮时，handleClick 函数会被调用，它会将 message 的值更新为 "Hello, World!"。

当状态发生改变时，React 会重新调用 App 组件的 render 方法，生成一个新的虚拟 DOM。然后，React 会将新的虚拟 DOM 和之前的虚拟 DOM 进行比较，找出差异，并只更新真实 DOM 中需要改变的部分。在这个例子中，只有 h1 元素的内容发生了改变，所以 React 只会更新 h1 元素的文本内容。

常见问题解答