flowchart LR
N0["01 JSX 与组件"]
N1["02 状态快照"]
N2["03 Hooks 与 Effect"]
N3["04 清理与竞态"]
N4["05 状态组织"]
N5["06 渲染与提交"]
N0 --> N1 --> N2 --> N3 --> N4 --> N5
React从入门到原理
从浏览器与组件学到 Vue、React、路由、状态、渲染、安全和交付
0 子目录4 文档
CHAPTER OVERVIEW · 章节概览
先理解 JSX、组件和状态快照，再处理外部同步与复杂状态；最后区分渲染、提交和浏览器绘制。
本章学习路线
箭头表示建议的学习顺序；先理解问题，再逐步进入实现与实践。
按顺序学习
4React 入门：JSX、组件和状态快照从 Vue 转到 React 时，最值得先调整的不是模板语法，而是对一次渲染的理解。React 会再次调用组件函数，计算这一轮界面；这一轮里拿到的 state 和事件处理函数，都有自己的时间位置。React Hooks 与 Effect：把外部系统同步好很多初学者把 useEffect 当成“组件里需要执行代码的地方”。结果筛选、提交、状态复制全挤在里面，依赖数组越补越乱。先问一句：这件事真的是在同步外部系统吗？Reducer、Context 与自定义 Hook：把复杂交互写清楚编辑文章时有草稿、保存中、成功、失败。若用四个互不约束的布尔值，可能出现“保存中且保存成功且保存失败”的荒唐组合。复杂状态首先需要模型，其次才是选择哪个库。React 渲染、提交与性能：重渲染不等于重画整页控制台里的组件日志又打印了一次，很多人立刻开始加 memo。先慢一点：函数再次执行，和整个 DOM 被销毁重建，并不是一回事。判断性能需要看实际工作量和用户感受到的延迟。