React，组合一切的表达力
React 的核心哲学是组合与声明式。从 Hooks 到并发特性，这份指南带你掌握 React 的现代写法与性能思维。
11内置 Hooks
3性能武器
1单向数据流
React 的核心哲学是组合与声明式。从 Hooks 到并发特性，这份指南带你掌握 React 的现代写法与性能思维。
声明式 UI：你描述“界面应该长什么样”，React 负责更新；单向数据流：数据从父到子流动，可预测可调试；组件即函数：一切 UI 都是函数的组合。
把这三个心智模型内化，React 的很多“魔法”就不神秘了。
核心认知：React 不一定是最快渲染的，但它的可预测性与工程化能力是最强的。
围绕 React 生态的核心知识点。
useState/useEffect/useMemo/useCallback 边界。
props、Context、状态提升、组合模式。
Zustand/Redux Toolkit 选型与实践。
memo、懒加载、并发特性应用。
React Router + 数据请求模式。
Testing Library、TS、规范落地。
按阶段提升，每阶段都有产出。
理解元素、组件、props、状态，能写清晰的小组件。
熟练使用内置 Hooks，并能抽取可复用的自定义 Hook。
掌握 memo/懒加载/并发特性，搭出合理的目录与数据层。
接入 TS、测试与规范，让项目可持续演进。
高频 Hooks 的使用场景。
| Hook | 用途 | 注意点 |
|---|---|---|
| useState | 组件局部状态 | 更新是异步的，注意批量 |
| useEffect | 副作用（请求/订阅） | 正确写依赖，避免死循环 |
| useMemo | 缓存计算结果 | 别过度使用 |
| useCallback | 缓存函数引用 | 配合 memo 使用才有效 |
| useRef | 引用 DOM/存可变值 | 变化不触发渲染 |
依赖应该包含 effect 中用到的所有响应式值。少写会闭包过期，多写会频繁触发。用 ESLint 的 exhaustive-deps 帮你兜底。
先定位渲染来源，再用 memo + useCallback 减少子组件重渲；数据层用选择器避免引用变化。
useTransition 适合大列表/低优先级更新场景，能显著提升交互流畅度。普通项目按需引入即可。
大多数场景 useState + Context 足够。跨模块共享复杂状态时再引入 Zustand/Redux，别一上来就上重武器。