React 是什么

这一课你将能做到

1. 用自己的话对比「一手改 DOM」和「用 React 描述界面」
2. 说出组件、状态这两个词的人话意思
3. 知道本站为何用 React，以及官方文档入口

为什么要学

上一门 JS 课里，学习清单要自己：改数组 → 清空列表 → 再画一遍 DOM。
项目一大，这种手写同步很容易乱：你改了数据，忘了改某一块界面；或者界面改了，数据和它不再一致。

React 的核心想法：你只描述「数据现在长这样，界面应该长那样」；数据一变，React 帮你更新页面。

人话：React 是写用户界面的 JavaScript 库（本站 platform 就在用它，外面还包了 Next.js 这个框架）。
你不是在学「另一种 HTML」，而是学一种用数据驱动界面的写法。

本站真实场景：路径卡片、学/练/我切换、「留一句」离开页，都是一块块 React 组件。读完本课，你再打开 platform/src 里带 "use client" 的文件，会认出「这就是函数 + 返回标签」。

先建立图像

以前（命令式，你指挥浏览器一步步做）：
  找到按钮 → 改文字 → 再找到列表 → 删掉重建…

React（声明式，你描述「现在该长什么样」）：
  const [count, setCount] = …  // 数据（状态）
  return <button>{count}</button>  // 界面长什么样
  点按钮只改 count，界面跟着变

词	人话	别和这个混
组件（Component）	可复用的一块 UI，像自定义标签	不是 CSS class
状态（State）	组件记得的、会变的数据	不是「服务器数据库」
Props	父组件传给子组件的参数，子只读	不是 CSS 属性随便改

把页面想成乐高：每块积木是组件；积木上写的数字如果会变，那数字就是状态。

跟着做（先建立感觉，不要求本课就配置工程）

步骤 1：打开官方文档首页

打开 react.dev/learn，扫一眼 Quick Start。
权威材料以这里为准，比零散「2020 年前 class 组件」博客靠谱。本门课结构对照官方 Learn，正文用本站自己的例子。

步骤 2：对比两段「计数器」思路

原生 JS 思路（你已会）：

let count = 0;
btn.addEventListener("click", () => {
  count++;
  span.textContent = count; // 自己改 DOM
});

数据在 count，界面在 span，你必须自己把两边对齐。忘写 textContent 这一行，数字已经加了，屏幕还是旧的。

React 思路（预告，下一课起细写）：

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button type="button" onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

你不需要现在就跑起来——先记住：点按钮只更新 count，按钮上显示的数字由 count 决定。
没有 querySelector，没有 textContent。界面是 count 的函数。

步骤 3：在本站找一个组件文件

打开仓库里任意带 "use client" 的组件（例如导航、路径卡片、离开页）。
看到这些就是 React：

• 文件顶上 "use client"（Next 里表示这块要在浏览器交互）
• import { useState } from "react"
• function Xxx(...) { return ( ...看起来像 HTML... ); }

对照着看 3 分钟，比空背定义有用。

步骤 4：用一句话记下数据流

数据变了 → React 再调用你的函数组件 → 得到新的「界面描述」 → 去改真正的 DOM

你几乎永远不要自己去「补一刀 DOM」。和 React 抢同一块界面，两边各改各的，屏幕会和记忆打架。

步骤 5：对照「命令式改 DOM」

用两句话写笔记：① 命令式：找到节点再改；② React：改 state，UI 是快照。
打开 react.dev 首页示例，指出哪一处是 state、哪一处是根据 state 算出来的文案。

讲清楚要点

1. React 不取代 HTML/CSS/JS，它建立在它们之上。标签、选择器、事件循环你仍要会。
2. 尽量不要在 React 里到处 querySelector 改界面——和 React 抢控制权会打架。聚焦输入框这类例外后面用 ref。
3. 数据向下流：父传 props 给子；子要改共享数据，通常通知父（或后面学的 Context）。
4. 本站分工：界面用 React/Next，业务 API 多在 Spring Boot。学 React 是为了把「学/练/我」画对，不是为了替代后端。
5. 现代写法是函数组件 + Hooks（useState 等），不要把课堂当成 2018 年 class 组件速成。

你可能会懵的地方

• 「库」和「框架」？
  React 官方称库：核心是 UI。Next.js 更像框架（路由、约定、打包）。先学 React 概念，再学 Next 课。

• 一定要会构建工具吗？
  正式项目要用 Vite 或 Next。本课先建立思想；下一课起用 JSX 细讲。卡住配置时，用官方文档的在线沙盒也能练。

• 和 Vue 比哪个好？
  都能做产品。本站技术栈是 React，一路学下去即可。面试被问对比时，说清「声明式、组件化」共同点就够入门。

• Virtual DOM 要现在搞懂吗？
  不必。入门记住：你返回描述，React 去更新真实页面。细节以后再挖。

• 学 React 还要 DOM 吗？
  要基础：事件、表单值、可访问性。但列表与条件优先用 JSX，少手改 DOM。

错法对照

错法	问题	正解
跳过 JS 直接抄 React	看不懂报错、看不懂 map	先完成 javascript-core 练习
用 React 又手改同一块 DOM	状态和屏幕不一致	改 state，让界面跟着走
只看 2020 年前老文	class 组件、过时生命周期	以函数组件 + Hooks 为准
把 React 当后端	到处 fetch 却不懂状态	UI 库；请求是另一层
把 React 当 jQuery 用	难维护	声明式 state
跳过 JS 直接抄组件	钩子难懂	先 javascript-core

自测三问

1. 声明式和命令式，用计数器怎么解释？
2. 状态（state）是什么？和数据库里的数据是一回事吗？
3. 为什么说 React 不取消 HTML/CSS？

小结一句话

React 让你用数据和组件描述 UI；数据变了界面跟着变，不必手写整页 DOM 同步。

动手加深

在纸上画：数据 → 组件函数 → 元素树 → 屏幕。下一课 JSX 就是写这棵树的语法糖。

跟着做（加厚 · react-intro）

步骤：最小可运行对照

在 Vite 或 Next 练习页粘贴本课核心示例，改一个输入，确认屏幕变化符合预期。再故意写一个错法表里的写法，看控制台/界面如何坏，然后改回。

每个概念都问：state 在谁手里？UI 哪一块会因它重绘？

操作顺序：打开对应文件 → 改一处可观察点（文案、类型、className 或分支）→ 保存看结果 → 复原或留下有意义的小改动。

步骤：错法故意练一次

先按「用 jQuery 式直接改 DOM 冒充完成」做 30 秒（或在注释里写出若这样做会怎样），再改成「改数据（state/props）让 UI 推导出来」。 目的不是留坑，而是让失败现象进长期记忆。

你可能会懵的地方（加厚）

• 热更新后状态丢了？
  正常：整树重挂会重置 state。用 key 或外提状态保留；开发期别被吓到。

• 和文档示例不一致？
  以你锁的 React 大版本 + react.dev 为准；旧博客的 class 组件示例仅作历史阅读。

• 这课和前后课怎么接？
  回看大纲上一课的小结一句、下一课标题；用自己的话写「本课产出什么可观察结果」。写不出来就重做跟着做。

错法对照（加厚）

错法	问题	正解
用 jQuery 式直接改 DOM 冒充完成	假完成/埋雷	改数据（state/props）让 UI 推导出来
只看不敲	第二天全忘	至少跑通本课步骤
跳过自测三问	以为会了	闭卷答再对稿

延伸

• react.dev/learn
• 下一课：JSX——在 JS 里写「长得像 HTML」的界面。