什么是 React？非开发者的通俗指南

React 是一个用于构建用户界面的 JavaScript 库，也就是人们看到并点击的那部分应用。你用一个个可复用的组件搭建屏幕，比如一个按钮、一张商品卡片或一整个页面；React 会让屏幕与你的数据保持同步：当数据变化时，React 会更新依赖该数据的页面部分。它由 Facebook（现为 Meta）创建，是开源项目，也是最广泛使用的网页应用构建方式之一。

用 AI 构建应用时，它为什么重要

如果你用 AI 工具构建网页应用，它很可能是用 React 写的。许多 AI 应用构建工具默认使用 React，因为它流行、文档完善，而且 AI 模型学习过的 React 代码数量极其庞大。

你不需要会写 React 也能用 AI 构建应用。但了解一点基础知识，能帮你：

• 准确地描述修改。 “把 ProductCard 组件里的价格加粗”比“让价格在某处更显眼”清楚得多。
• 理解错误信息。 像“Cannot read properties of undefined”或“Too many re-renders”这样的提示，就更容易读懂了。
• 做出合理的选择。 普通的 React 应用在浏览器中渲染，这会影响搜索可见性和首次加载速度。了解这一点，有助于你决定什么时候该要求采用不同的架构。
• 以后与开发者合作。 React 是常见技能，开发者通常可以很快接手一个 React 代码库。

一个日常类比

想想乐高积木。你不必从一整块石头上雕出整个模型，而是用标准的积木拼搭。几块积木拼成一个轮子；四个轮子加上其他部件，就成了一辆车。如果你想让每辆车的轮子都是红色的，只需修改一次轮子的设计。

React 组件就是这些积木。一个 Button 组件被用在 ProductCard 里，ProductCard 又用在 ProductGrid 里，而 ProductGrid 是 ShopPage 的一部分。修改一次 Button，应用里所有的按钮都会随之改变。

类比的另一半是：想象每当你修改说明书时，乐高模型都会自动重新搭建。这正是 React 的另一个诀窍：你描述在当前数据下屏幕应该是什么样子，React 会自行判断页面上需要改动什么。

核心概念

组件

组件就是一个返回一段界面的 JavaScript 函数。React 的文档将组件描述为拥有自身逻辑和外观的一部分界面。组件名以大写字母开头。

JSX

组件通常用 JSX 编写，它看起来像是混在 JavaScript 里的 HTML：

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX 并非必需，但 React 的文档指出大多数项目都会使用它。它在浏览器运行之前会被转换为普通的 JavaScript。

Props

Props 是传入组件的输入，就像可复用零件上的设置项：

<ProductCard name="Lavender Candle" price={24} />

同一个 ProductCard 可以显示任何商品。

State

State 是组件记住的、可以在应用运行时变化的信息，例如菜单是否打开、搜索框里输入了什么、购物车里有多少件商品。当 state 变化时，React 会重新渲染该组件，使屏幕与之保持一致。

Hooks

Hooks 是名称以 use 开头的函数，例如 useState（记住一个值）和 useEffect（在渲染后运行代码，比如获取数据）。你会在 AI 生成的 React 代码中频繁见到它们。

实例：购物车计数器

假设你的网店有一个“加入购物车”按钮，以及一个显示商品数量的购物车图标。用 React 写出来大致如下：

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

当顾客点击“加入购物车”时会发生以下事情：

1. 按钮的 onClick 调用 onAdd，onAdd 再调用 setCartCount。
2. React 把 cartCount 状态从 0 更新为 1。
3. React 重新渲染 Shop，并把 count={1} 传给 CartIcon。
4. 页面显示“Cart (1)”。没有人写过“找到购物车文字并修改它”的代码——屏幕会跟随数据变化。

这里也有局限。这个计数保存在浏览器内存中。刷新页面后，它会回到 0。要保留购物车内容，你需要把它保存到持久的地方，比如 Cookie、浏览器存储，或通过后端存入数据库。React 负责屏幕，它并不负责存储你的数据。

React 在网页应用中的位置

“Vite + React”应用在浏览器中渲染（即单页应用）。Next.js 应用可以先在服务器上渲染页面，这有助于搜索引擎抓取，也能加快首次加载速度。

常见术语解释

常见错误与误解

• “React 是一种编程语言。” 它是一个库，用 JavaScript（或 TypeScript）编写，并在其中使用。
• “React 会保存我的数据。” State 存在浏览器中，刷新后就会消失。需要长期保存的数据必须依赖后端和数据库。
• 把密钥写进 React 代码。 React 应用中的所有内容都会发送到访客的浏览器，因此放在那里的 API 密钥等于公开。密钥应保存在服务器端。
• “React 应用无法在搜索中排名。” 仅在客户端渲染对搜索不利，但预渲染或服务端渲染可以解决大部分问题。
• 巨型组件。 一个 1,000 行的组件，无论对人还是对 AI 来说，都很难安全地修改。请要求拆分成更小的组件。
• 以为 React 网页应用就是手机应用。 它在浏览器中运行，包括在手机上，但它并不是 App Store 中的应用。

可以向 AI 构建工具提出的要求

• “把这个页面拆分成小的、有名称的组件，并告诉我每个组件位于哪个文件中。”
• “让 ProductCard 组件可以复用，以 name、price 和 image 作为 props。”
• “把购物车保存到数据库中，这样刷新页面后内容也不会丢失。”
• “所有 API 密钥都保存在服务器端；React 代码应当调用我们自己的 API。”
• “为来自服务器的数据添加加载中和错误状态。”
• “如果这些页面的搜索可见性很重要，请对它们进行预渲染，或使用服务端渲染的架构。”
• “用通俗的语言解释这个错误是什么意思，以及它来自哪个组件。”

想了解更宏观的背景，可参阅前端与后端；想审查 AI 写出的代码，可参阅如何审查 AI 生成的代码。

Mythex 中的 React

除非你另外指定，Mythex 新建项目时会使用 Vite + React + TypeScript + Tailwind，并在你聊天时运行实时预览。你可以在第一条提示词中指定其他架构，例如“使用 Next.js”或“纯静态 HTML 落地页”，Mythex 会根据你的描述来选择；没有专门的设置页面。关于技术如何选定，参阅文档中的技术选择页面。免费版的代码编辑器为只读；在 Pro 版中，你可以直接编辑 React 代码，并将项目导出，以便在其他地方继续开发。

常见问题