# React 2026 学习 Demo

面向有 Java 基础的前端学习者。这个目录把旧版类组件、`ReactDOM.render`、旧生命周期和多个独立脚手架收敛为一个可直接运行的 React
19 示例。

直接在浏览器打开 `index.html` 即可，无需 Node.js、网络或旧项目目录。`app.js` 已包含 React 运行时；`main.jsx`
是带中文注释的教学源码，便于按模块阅读。

## 建议学习顺序

1. 组件、`props` 与 `state`：UI 是输入数据的函数，列表渲染使用稳定的 `key`。
2. 受控表单和不可变更新：组件 state 是每次渲染的快照，基于旧状态更新时使用函数式 setter。
3. `useEffect`：只用于计时器、事件、DOM、网络等 React 外部系统，并始终考虑 cleanup。
4. 服务端状态：API 数据与组件本地 UI 状态不同；需要缓存、失效、重试或共享时使用 TanStack Query 一类工具。

## Java 对照

| React               | Java / 后端中的近似概念                |
| ------------------- | -------------------------------------- |
| 函数组件            | 根据入参构建返回值的视图函数           |
| `props`             | 只读方法参数或 DTO                     |
| `state`             | 组件私有、触发重新渲染的内存快照       |
| `useEffect` cleanup | `try/finally` 中释放定时器、订阅或连接 |
| TanStack Query      | 带缓存和失效策略的 HTTP 客户端数据层   |

此页为教学而使用打包后的浏览器脚本。真实应用建议使用 Vite 的 React +
TypeScript 模板，通过 npm 管理依赖和 lockfile；不要把生产 React 项目写成单个 HTML 文件。