什么是 React？核心概念及与 jQuery 的区别

React 是一个用于构建用户界面（UI）的 JavaScript 库。虽然 jQuery 侧重于直接选择和修改页面元素，但 React 侧重于描述数据的特定状态下的界面。理解组件和 state 可以更容易地比较这两种工具，并决定何时使用它们。

什么是 React？

在 React 中，你可以将界面的一部分构建为组件，例如按钮、搜索框和文章卡片。每个组件将其外观和相关行为结合在一起。你可以将组件组合成页面，并通过为每篇文章提供不同的标题和作者来重用卡片。

React 使用 JavaScript，HTML 和 CSS 仍然对于理解网页界面的结构和外观非常有用。安装 React 并不会自动提供登录服务器、数据库或 URL 之间的导航功能。你仍然需要选择并实现应用程序的其他部分。本文重点介绍在浏览器中运行的基本界面；官方 React 快速入门介绍了它的构建模块。

React 的核心概念

组件：外观和行为的单元

函数组件是一个返回要显示内容的 JavaScript 函数。你定义的组件名称以大写字母开头，例如 ProductCard，而 HTML 元素如 button 则使用小写名称。下面的组件定义了一个卡片，你可以使用不同的产品数据重复使用其结构。

function ProductCard({ name, price }) {
  return (
    <article className="product-card">
      <h3>{name}</h3>
      <p>KRW {price}</p>
    </article>
  );
}

JSX：在 JavaScript 中表达标记

JSX 是一种语法扩展，允许你在 JavaScript 文件中编写类似 HTML 的标记。上面的 <article> 部分就是 JSX。大括号允许你插入 JavaScript 表达式，例如 name 和 price。将此组件粘贴到普通 HTML 文件中并不足以运行它。

JSX 使用 className 而不是 class，并且要求显式闭合标记，例如 <img />。多个顶级元素必须包裹在父元素或 Fragment 中。JSX 在入门示例和项目中很常见，尽管 React 可以在不使用 JSX 的情况下使用。请参见 React 编写 JSX 的规则 以了解语法。

Props：由父组件传递的数据

Props 是 properties（属性）的缩写，指父组件传递给子组件的值。它们可以让同一个卡片显示不同的名称和价格，或让同一个按钮显示不同的标签。一个 prop 可以包含字符串、数字、对象或函数。以下是一个以韩元 (KRW) 定价的示例商品:

<ProductCard name="Beginner keyboard" price={35000} />

子组件读取其 props 以构建其输出。将 props 当作只读处理：如果需要更改它们的值，请更新父组件中的数据，以便它传递新的值。父组件还可以传递一个回调函数，以便子组件在用户操作后调用。将 props 传递给组件解释了这种数据流。

状态：记住会变化的值

状态是组件需要记住的信息，例如输入值、选择或点击次数。调用 useState 返回当前值和用于更新它的函数。useState 是一个 Hook，是一个让组件访问 React 功能的函数；在组件函数的顶层调用它。

const [count, setCount] = useState(0);

初始值为 0，count 是当前状态，setCount 请求更新。单独更改普通变量不会告诉 React 更新界面。驱动显示的值需要适当的状态结构。状态：组件的记忆 解释了状态与局部变量的区别。

React 如何更新界面？

在计数器中，点击按钮会请求状态更新。然后 React 计算该状态的输出，并将必要的更改应用到 DOM。文档对象模型（DOM）是浏览器对文档的对象表示，包括其元素和文本。

1. 用户操作：按钮点击运行事件处理程序。
2. 更新请求：setCount 指定下一个值。
3. 渲染：React 调用组件以计算它们的输出。
4. 提交：React 将所需的更改应用到 DOM。
5. 绘制：浏览器绘制结果。

渲染意味着通过调用组件来计算输出。这并不意味着重新加载整个页面或删除并重新创建每个 HTML 元素。如果输出未更改，渲染可能不需要 DOM 更改。React 的 渲染和提交文档 区分了这些步骤。

调用 setCount 并不会立即替换正在运行的事件处理程序内的 count 的值。它是为随后的渲染请求状态，而且 React 可以批量处理多个更新。当新值依赖于先前的值时，可以使用更新函数表达这种关系：

setCount(previousCount => previousCount + 1);

此函数接收待处理的状态并返回下一个状态。当多个增量排队时非常有用，因为每次更新都是根据之前的结果计算的。useState 参考文档 解释了更新函数及其要求。

React 和 jQuery 有什么区别？

jQuery 也是一个 JavaScript 库。它提供选择器、事件处理、内容和样式的更改，以及 Ajax 请求。Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 与 XML）的缩写，这是一种无需重新加载整个页面即可与服务器交换数据的技术；交换的数据不必是 XML。 官方的 jQuery 介绍 将 DOM 操作和事件处理列为其主要功能之一。

考虑将产品添加到购物车。使用 jQuery，你的代码可能会插入一个列表项、更新数量和总价，并隐藏空购物车消息。使用 React，你可以根据购物车状态来描述这些显示。两种方法都不会自动处理服务器错误或验证所有传入的数据。

React 并不总是更快，而 jQuery 代码也并不总是更难维护。结果取决于界面、实现方式、加载的代码以及用户操作。单个小交互和同步多个状态的界面会产生不同的维护需求，因此应在各自的上下文中进行评估。

使用 jQuery 和 React 构建相同的计数器

两个示例都从 0 开始，每次点击按钮时计数增加 1。它们的标题标明所用的库；除此之外，功能和布局相同。比较每种实现更新显示数字的位置。以下示例已在 React 19.3.0、jQuery 4.0.0、Vite 8.3.4、Node.js 24.19.0 和 Microsoft Edge 154 上进行了检查，包括鼠标点击、键盘操作和页面重新加载。

jQuery 示例：更改选定元素的文本

将下面的完整代码保存为 jquery-counter.html 并使用 UTF-8 编码，然后在浏览器中打开。它从官方内容分发网络（CDN）加载 jQuery 4.0.0，因此你需要连接互联网。请查看 官方 jQuery 发布版本列表 获取可用的版本和文件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery counter</title>
  <style>
body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }
  </style>
</head>
<body>
  <main class="counter">
    <h1>jQuery counter</h1>
    <p>Click count: <span id="count" aria-live="polite">0</span></p>
    <button type="button" id="increase">Add 1</button>
  </main>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
    let count = 0;

    $('#increase').on('click', function () {
      count += 1;
      $('#count').text(count);
    });
  </script>
</body>
</html>

$("#increase") 选择按钮，.on("click", ...) 附加处理程序。更改变量后，代码调用 $("#count").text(count) 来更新显示的文本。有关这些操作，请参阅 jQuery .on() 参考 和 jQuery .text() 参考。

脚本在 HTML 代码中放在按钮之后，因此在此示例运行时目标元素已经存在。如果没有任何变化，请检查浏览器开发者工具中的 CDN 请求和控制台错误，并比较元素 ID 与选择器。在将此适配到 WordPress 主题时，避免重复加载库，并检查 $ 是否在其 noConflict 配置下引用了 jQuery。

React 示例：更新状态以更改界面

本学习示例使用 Vite 的 JavaScript React 模板。Vite 提供开发服务器并转换和构建源文件。Node.js 在您的计算机上运行这些工具，而 npm 安装包并运行项目命令。安装一个符合 Vite 入门要求 的受支持的长期支持（LTS）版本的 Node.js。到 2026 年 10 月，该指南列出了 Node.js 20.19+ 或 22.12+；还需检查生成模板的任何其他要求。

1. 在您希望创建项目的文件夹中打开终端。确保不存在同名的文件夹。
2. 运行以下命令以创建 JavaScript react 模板并安装其包。

npm create vite@latest react-counter -- --template react --no-interactive
cd react-counter
npm install

在第一次运行时，npm 可能会要求你确认安装脚手架工具。安装完成后，将 src/App.jsx 的内容替换为以下代码。label 是由父组件提供的属性，count 是组件记住的状态。

import { useState } from 'react';

function Counter({ label }) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(previousCount => previousCount + 1);
  }

  return (
    <main className="counter">
      <h1>{label}</h1>
      <p>Click count: <span aria-live="polite">{count}</span></p>
      <button type="button" onClick={handleClick}>Add 1</button>
    </main>
  );
}

export default function App() {
  return <Counter label="React counter" />;
}

在 src/main.jsx 中使用以下入口代码。createRoot 将 React 界面连接到 ID 为 root 的 HTML 元素，index.css 提供样式。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

将 src/index.css 替换为下面的 CSS，以匹配 jQuery 示例。替换后的 App.jsx 不会导入 App.css，因此模板的默认组件样式不会干扰此布局。

body {
  margin: 0;
  color: #20242b;
  background: #fff;
  font: 18px/1.7 Arial, sans-serif;
}
.counter {
  box-sizing: border-box;
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid #c6d2dd;
  border-radius: 12px;
  background: #f4f9fc;
}
h1 { font-size: 25px; margin: 0 0 12px; }
button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #006c9c;
  color: white;
  font: inherit;
  cursor: pointer;
}
button:focus-visible { outline: 3px solid #a03c00; outline-offset: 3px; }
@media (max-width: 510px) { .counter { margin: 16px; } }

项目的 index.html 必须包含 <div id="root"></div> 以及加载 src/main.jsx 的模块脚本。保持 Vite 模板的结构，并为英文文档使用 lang="en"。启动开发服务器：

npm run dev

打开终端中打印的本地地址。通常是 http://localhost:5173，但如果该端口被占用，可能会使用不同的端口。使用 Ctrl+C 停止终端中的服务器。如果更改未显示，请检查是否已保存文件并在正确的项目中工作。JSX 错误会显示在终端或浏览器的错误显示中。

React 处理程序不会选择数字元素并替换其文本。JSX 表达式 {count} 将输出连接到状态，而 setCount 请求新的状态。在这两个示例中，重新加载页面会将计数重置为 0，因为未实现任何存储。这些示例展示了更新模式；它们不是性能基准。

什么时候应该选择 React 或 jQuery？

向现有页面添加一个小功能

一个用于切换元素或小菜单的按钮，使用 jQuery 可能很直接。如果现有页面已经依赖 jQuery，保持这种结构可以减少更改的范围。同时也要考虑标准 DOM API 是否足够。并不是每一个小交互都需要新的依赖。

构建具有关联状态的界面

当相同的数据影响产品列表、筛选器和购物车总计，或者类似界面重复出现时，值得考虑使用 React 的组件和状态模型。你仍然需要决定每个状态归哪个组件所有，以及何时刷新服务器数据。仅仅采用 React 并不能保证良好的设计。

在现有网站的部分区域添加 React

你不需要重建整个网站来使用 React。你可以在特定元素中挂载一个组件，同时保持页面的其他部分原有的形式。官方指南 将 React 添加到现有项目中 描述了设置和范围。

如果 React 和 jQuery 共享一个页面，请为它们的 DOM 所有权划定明确的边界。任意添加或删除 React 管理的子元素可能会导致真实 DOM 与 React 的视图不同步。操作 DOM 的插件需要一个集成，以在适当的生命周期内管理其初始化和清理。请参阅 React 对修改其管理的 DOM 的指导 以了解这些限制。

在采用工具之前，考虑界面状态的复杂性、可重复使用的组件、团队的 JavaScript 经验以及开发和部署的设置。一个已有 jQuery 依赖的小页面与一个新的交互式应用程序的需求是不同的。在学习了 HTML、CSS 和 JavaScript 的基础知识后，运行这些计数器可以具体比较直接更改元素与通过状态描述界面之间的差异。