认识 React - React 教程

讲解

React 是 Meta 开源的 UI 库，2013 年发布至今统治了前端招聘市场的半壁江山。它的核心思想可以用一句话概括：UI 是状态的函数——UI = f(state)。你不手动操作 DOM，而是写一个「根据状态返回界面描述」的函数（组件），状态变了 React 重新执行函数、对比前后两份描述（diff）、把差异应用到真实 DOM。这个模型让界面开发从「命令式的逐步操作」变成「声明式的快照推导」，复杂度越高收益越大。

React 的三个支柱概念：组件（可复用的 UI 单元，本质是一个函数）、JSX（在 JavaScript 里写类 HTML 语法的语法糖，编译成函数调用）、Hooks（让函数组件拥有状态和副作用能力的 API，如 useState、useEffect）。React 19（2024 年底发布稳定版）是最新版本，带来了 Actions、use() hook、useOptimistic 等新能力，但基础心智模型十年未变——学好组件 + Hooks 就掌握了 80%。

React 只负责视图层，这既是特点也是取舍：路由（React Router）、全局状态（Zustand/Redux）、数据请求（TanStack Query）都由生态库补齐。好消息是每个领域都有事实标准，坏消息是选择多容易迷路。本教程共 24 章，全部使用函数组件 + Hooks + React 19 的现代写法，不涉及已被官方标记为遗留的 class 组件。

每章都包含一个可以在 Node.js 里直接运行的纯逻辑示例——用几十行普通 JavaScript 模拟 React 内部机制（JSX 编译产物、Hooks 链表、状态批处理），帮你看清框架在做什么；这些代码在本教程构建时被真实执行，断言全部通过才会发布。

示例

JSX 不是魔法，它编译后就是普通的函数调用。下面这段代码模拟 JSX 的编译产物——React 元素就是一个普通的 JS 对象（在本教程构建时被真实执行）：

import assert from 'node:assert/strict';

// <Button color="blue">保存</Button> 编译后等价于：
// createElement(Button, { color: 'blue' }, '保存')
function createElement(type, props, ...children) {
  return { type, props: { ...props, children } };
}

// 一个「组件」就是一个返回元素树的函数
function Button(props) {
  return createElement('button', { className: 'btn-' + props.color }, props.children);
}
function App() {
  return createElement(
    'div',
    { className: 'panel' },
    createElement('h1', null, '购物车'),
    createElement(Button, { color: 'blue' }, '保存'),
  );
}

// 渲染 = 递归执行组件函数，展开成元素树
function render(element) {
  if (typeof element.type === 'function') return render(element.type(element.props));
  const children = (element.props.children || []).flat().map((c) =>
    typeof c === 'string' ? c : render(c),
  );
  return '<' + element.type + '>' + children.join('') + '</' + element.type + '>';
}

const html = render(createElement(App));
assert.strictEqual(html, '<div><h1>购物车</h1><button>保存</button></div>');

console.log('JSX 编译产物:', JSON.stringify(createElement(Button, { color: 'blue' }, '保存').props));
console.log('渲染结果:', html);

真实的 React 组件（JSX 写法）：

function Button({ color, children }) {
  return <button className={'btn-' + color}>{children}</button>;
}

export default function App() {
  return (
    <div className="panel">
      <h1>购物车</h1>
      <Button color="blue">保存</Button>
    </div>
  );
}

看清了这个对应关系，你就知道了 JSX 里为什么不能写 if 语句（表达式位置）、为什么组件名要大写（小写会被当成 HTML 标签字符串）——一切「规则」都只是编译结果的推论。

常见坑

以为 JSX 是模板字符串：它不是 HTML，是 JavaScript 表达式，规则（单表达式、className、camelCase 属性）都来自编译产物。
一上来就追生态全家桶：路由、状态管理、请求库先别碰，把组件和 Hooks 学透再加，否则会被概念淹没。
学 class 组件教程：2020 年后的新代码几乎都是函数组件，认准 hooks 写法，老教程注意发布年份。
忽视 JavaScript 基础：React 是「好 JS 的放大器」——数组方法、解构、闭包不熟的话处处卡壳，建议先过本站 JavaScript 教程。
手动操作 DOM：jQuery 时代的习惯带进来会打乱 React 的 diff，一切以状态驱动。

小结

React = UI 是状态的函数 + 组件 + JSX + Hooks；JSX 编译成 createElement 调用，元素就是普通对象。本教程 24 章，全程函数组件 + React 19。下一章先把开发环境搭起来。