3 初识 React 之理解 JSX 与虚拟 DOM

在上篇文章中，我们介绍了如何创建一个基本的 React 应用程序。在成功搭建了我们的开发环境后，接下来我们将深入了解 React 中两个重要的概念：JSX 和 虚拟 DOM。这两个概念是 React 的核心，理解它们有助于我们更好地构建和优化 React 应用。

什么是 JSX？

JSX 是一种 JavaScript 的语法扩展，它看起来很像 HTML，但实际上是 JavaScript 的一种语法糖。使用 JSX，我们可以以一种更直观和简洁的方式来创建 React 组件。React 允许我们在 JavaScript 文件中直接使用 JSX 语法，从而描述我们想要在 UI 中展示的内容。

JSX 语法示例

以下是一个简单的 JSX 示例，展示了如何使用 JSX 创建一个组件：

const HelloWorld: React.FC = () => {
    return <h1>Hello, World!</h1>;
};

在这个示例中，我们创建了一个名为 HelloWorld 的 React 组件。这个组件返回了一个简单的 <h1> 元素，显示文本 Hello, World!。请注意，JSX 标签会被最终转换为 JavaScript 对象。

JSX 中的表达式

JSX 也支持在大括号 {} 中嵌入 JavaScript 表达式，这使得我们可以动态地渲染内容。以下示例展示了如何传入一个变量：

const name = "Alice";

const Greeting: React.FC = () => {
    return <h1>Hello, {name}!</h1>;
};

在这里，{name} 将被替换为变量 name 的值，最终渲染为 Hello, Alice!。

何为虚拟 DOM？

虚拟 DOM 是 React 的另一核心概念。它是 React 在内存中维护的一种轻量级的 DOM 表示。当我们更新组件的状态时，React 首先会在虚拟 DOM 中进行操作，而不是直接与真实的 DOM 交互。

虚拟 DOM 的工作原理

1. 初始渲染： 当我们首次渲染组件时，React 会创建一个虚拟 DOM 树，并将其映射到真实 DOM。
2. 状态更新： 当组件的状态或属性变化时，React 会重新渲染虚拟 DOM，并生成一个新的虚拟 DOM 树。
3. 比较（Diffing）： React 会比较新旧两个虚拟 DOM 的差异，找出需要更新的部分。
4. 更新真实 DOM： 之后，React 将只更新必须改变的部分，极大地提高了性能。

虚拟 DOM 的优势

• 性能提升： 通过减少与真实 DOM 的交互，React 能够显著提升应用的性能。
• 简化更新逻辑： 开发者不需要手动操作 DOM，只需要关注组件的状态与表现。

以下是一个组件状态更新的示例，演示了虚拟 DOM 如何工作：

import React, { useState } from 'react';

const Counter: React.FC = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    );
};

这个简单的计数器组件允许用户点击按钮递增计数。每当我们点击按钮时，这里发生的实际上是：

1. 状态 count 发生变化。
2. React 重新渲染虚拟 DOM。
3. React 比较新旧虚拟 DOM 并更新真实 DOM 中的计数值。

小结

通过对 JSX 和 虚拟 DOM 的理解，我们能够更深入地掌握 React 的工作原理。JSX 让我们能够以一种熟悉的方式描述 UI，而 虚拟 DOM 则提升了应用的性能和易用性。这两个知识点将为我们后续深入学习 React 组件、状态管理和生命周期方法打下坚实的基础。

在下一篇文章中，我们将转向 TypeScript 的基础知识，为我们的 React 开发旅程配备更强大的工具。如果你已经准备好，那么就让我们一起进入 TypeScript 的世界吧！