React学习路线图
按心智模型、Hooks、状态边界和性能主题组织 React 的推荐学习顺序。
#tech / dev / frame
#resource / react
#type / synthesis
#status / growing
[!info] related notes
- 所属 MOC: React MOC
- 主题入口: react
- 面试桥接: react-interview-high-frequency
React学习路线图
学 React 时，真正决定你后面会不会乱的，不是 Hook 数量，而是有没有先建立 UI = f(state)、单向数据流和副作用边界这三条主线。
推荐顺序
第一阶段：先建立组件与 JSX 心智
第二阶段：掌握最核心的 Hooks
- react-hooks
- react-use-state
- React 状态模型 vs Vue3 响应式模型
- react-use-ref
- react-use-context
- react-use-reducer
第三阶段：补副作用边界
这一层是很多 React 初学者最容易混乱的地方。
第四阶段：进入组件设计与状态管理
第五阶段：补渲染与性能认知
- React组件渲染与重渲染
- React 渲染传导与状态边界
- react-use-memo
- react-use-callback
- react-memo
- react-performance-overview
第六阶段：补 SSR 与接管主线
- hydration
- react-use-effect-and-ssr
- react-use-layout-effect-and-ssr
- react-server-vs-client-components
- react-ssr-data-fetching
- react-ssr-vs-hydration-vs-server-components
一条实用学习原则
不要一开始就把 React 学成“背 Hook 面板”。先分清渲染逻辑、事件逻辑和副作用逻辑，再去理解状态管理和性能优化，效果最好。
如果是面试导向
学完主线后，可以继续读 react-interview-high-frequency，把高频问法和现有原子笔记对应起来。