JSX 与组件：从零开始理解 React 的核心思想

烟袅破辰
82 阅读5分钟

在现代前端开发中，React 已经成为最受欢迎的框架之一。而它的核心魅力，正是来自于 JSX 和 组件化 这两大特性。本文将结合一段典型的 React 代码，带你深入理解 JSX 是什么、组件如何工作，以及它们是如何共同构建出高效、可维护的用户界面。

一、JSX：JavaScript 中的 HTML

我们先来看这段代码中的第一行：

import { useState, createElement } from 'react';

这说明我们正在使用 React 的核心功能 —— useState 用于管理状态，createElement 是 React 创建元素的基础方法。但真正让 React 与众不同的是它引入的 JSX 语法。

什么是 JSX？

JSX 全称是 JavaScript XML，是一种在 JavaScript 中编写类似 HTML 结构的语法扩展。它看起来像 HTML，但实际上会被编译成标准的 JavaScript 代码。

比如这段代码：

const element = <h2>JSX 是 React 中用于描述用户界面的语法扩展</h2>;

在运行时会被 Babel 编译为：

const element = React.createElement("h2", null, "JSX 是 React 中用于描述用户界面的语法扩展");

也就是说，JSX 实际上是 createElement 的语法糖，目的是提升代码的可读性和开发效率。

注意：JSX 并不是字符串，也不是直接渲染到页面的 DOM，而是被转换为 React 元素对象，最终由 React 渲染引擎处理。

二、组件的本质：函数封装 UI 与逻辑

接下来我们看这个 App 函数：

function App() {
  // ...
  return (
    <>
      <h1>Hello <span className='title'>{name}!</span></h1>
      {/* 其他内容 */}
    </>
  );
}
export default App;

这里的 App 就是一个典型的 函数式组件。它接收数据（通过 state），返回 JSX（即 UI 描述）。这种“函数即组件”的设计，是 React 最大的创新之一。

组件的三大要素

一个完整的组件通常包含以下三个部分：

  1. UI（视图） ：由 JSX 构建
  2. 逻辑（行为） ：如事件处理、状态更新
  3. 样式（外观） ：通过 CSS 或内联样式控制

在这段代码中：

  • useState 管理了 name、todos 和 isLoggedIn 三个状态；
  • setTimeout 模拟了异步数据变化；
  • toggleLogin 是一个点击事件处理器；
  • 所有这些都封装在一个函数中，并通过返回值决定界面显示内容。

三、状态管理：让组件响应式

React 的核心思想之一是 响应式数据绑定。当状态发生变化时，组件会自动重新渲染，从而更新 UI。

const [name, setName] = useState("vue");
setTimeout(() => {
  setName("react");
}, 2000);

这里 name 初始值为 "vue"，两秒后被改为 "react"。由于 setName 是由 useState 返回的更新函数，因此一旦调用，React 会触发重新渲染，导致 <h1> 中的内容从 "Hello vue!" 变为 "Hello react!"。

这就是 数据驱动视图 的体现：数据变了，界面跟着变。

四、条件渲染与列表渲染

React 支持多种渲染方式，包括条件判断和列表映射。

条件渲染

{isLoggedIn ? <div>已登录</div> : <div>未登录</div>}

根据 isLoggedIn 的布尔值决定显示哪个内容，这是常见的条件渲染写法。

列表渲染

{todos.length > 0 ? (
  <ul>
    {todos.map((todo) => (
      <li key={todo.id}>{todo.title}</li>
    ))}
  </ul>
) : (
  <div>暂无事件</div>
)}

这段代码展示了如何遍历数组并生成多个 <li> 元素。特别注意：

  • 使用了 .map() 方法；
  • 每个元素必须有唯一的 key 属性（这里是 todo.id）；
  • 当列表为空时，显示提示信息。

建议：永远为列表项提供稳定的 key，避免性能问题和渲染异常。

五、文档碎片与 JSX 片段

<>
  <h2>JSX 是 React 中用于描述用户界面的语法扩展</h2>
  <h1>Hello {name}!</h1>
</>

这里的 <>...</> 是 React 的 Fragment，也叫文档碎片标签。它的作用是包裹多个顶层元素而不添加额外的 DOM 节点。

如果没有它，你可能会被迫加一个无意义的 <div>，破坏语义结构。而 Fragment 解决了这个问题，让你可以自由地返回多个子元素。

六、组件树与层级关系

虽然这段代码只有一个根组件 App，但它实际上构成了一个 组件树：

App
├── h2
├── h1
│   └── span
├── ul
│   ├── li
│   └── li
├── div (登录状态)
└── button

每个 JSX 元素都是树上的一个节点，React 会根据这个结构创建虚拟 DOM，并与真实 DOM 进行比对，只更新发生变化的部分。

七、为什么选择 React？JSX 的优势

相比传统模板引擎或 Vue 的模板语法，React 的 JSX 有几个显著优势：

  1. 完全在 JS 内部操作
    你可以直接使用 JavaScript 表达式、变量、函数等，无需学习新的模板语言。
  2. 类型系统友好
    在 TypeScript 中，JSX 可以很好地配合类型检查，提高代码安全性。
  3. 高度灵活
    你可以把任何表达式嵌入 JSX，例如计算属性、条件判断、循环等。
  4. 函数式编程思维
    组件是纯函数，输入决定输出，易于测试和调试。

八、总结：JSX 与组件的协同作用

回到最初的问题：JSX 是什么？组件是什么？

  • JSX 是一种语法扩展，用于描述 UI 结构，本质是 createElement 的简化形式；
  • 组件是函数，它接收状态和 props，返回 JSX；
  • 状态驱动视图，通过 useState 实现数据响应；
  • 组件化开发 让我们能够将复杂界面拆分为小块，逐个实现、复用和维护。

这段看似简单的 App.jsx，其实已经包含了 React 的几乎所有核心概念：状态管理、事件处理、条件渲染、列表渲染、组件树、文档碎片……

avatar
文章
阅读
粉丝