React 解决了什么问题#

2013 年 React 出来时，大家还在手动操作 DOM、维护 innerHTML。React 的核心主张是：UI = f(state)——你只描述”状态对应的界面”，状态变了框架帮你重渲染。这一下把”手动同步 DOM”的噩梦消灭了。

1
React 实战
2

3
├── 基础心智
4
│   ├── JSX 与组件模型
5
│   ├── Props 与 State
6
│   └── 事件与表单
7
├── 渲染控制
8
│   ├── 条件渲染与列表（key）
9
│   ├── Hooks 基础
10
│   └── 常用 Hooks
11
├── 能力与规模
12
│   ├── 自定义 Hook
13
│   ├── 状态管理
14
│   ├── 性能优化
15
│   └── 路由与数据请求
16
└── 工程化
17
    └── 工程实战与常见坑

我带新人最常纠正的几件事#

• 把 state 当”应该渲染的最小数据源”：能算出来的就不要存（如 fullName 由 first+last 派生）。
• 滥用 useEffect：把本可以同步计算的逻辑塞进 useEffect，导致多一次渲染和竞态。
• key 用 index：列表重排时状态错乱。
• 一上来就 Redux：小项目 useState + 提升状态足够，过度设计反而难维护。
• 无脑 memo：React.memo 有比较成本，乱用反而更慢。

怎么读#

• 01–04 建立心智模型，务必动手写组件。
• 05–07 是 Hooks 核心，React 现代写法的命根子。
• 08–11 偏工程，按你项目阶段取用。

小结#

React 不复杂，复杂的是”状态如何流动”。把单向数据流（state 自上而下、事件自下而上）刻进脑子，后面都是水到渠成。下一篇从 JSX 与组件模型讲起。