依赖数组填错、对象每次新建、组件没有 memo，一个小心思就能让整棵组件树白渲染。
定时器、事件回调里读到的 state 总是旧值，查半天才发现是陈旧闭包在作祟。
Context 一多就乱，Redux 样板代码一堆，团队各自为政，改一个状态牵一发动全身。
函数组件的状态入口，理解状态更新触发重新渲染的机制。
数据请求、订阅、DOM 操作，掌握依赖数组与清理函数。
缓存计算结果与函数引用，减少不必要的子组件渲染。
访问 DOM、保存不触发渲染的可变值。
主题、语言、登录态等全局数据的轻量共享方案。
把可复用的逻辑封装成 useXxx，组合而非继承。
一份高频速查表：把"想做什么"翻译成"用哪个 Hook"。
| 想做什么 | 首选 Hook | 备选 | 注意 |
|---|---|---|---|
| 保存并响应状态 | useState | useReducer | 复杂状态用 useReducer |
| 发起数据请求 | useEffect + 请求库 | SWR / TanStack Query | 竞态需用 AbortController |
| 缓存昂贵计算 | useMemo | — | 不是所有计算都值得缓存 |
| 稳定函数引用 | useCallback | useMemo 返回函数 | 配合 memo 才有意义 |
| 访问 DOM 节点 | useRef | 回调 ref | ref 变化不触发渲染 |
| 跨层级共享数据 | useContext | 状态库（Zustand） | 频繁更新慎用 Context |
写 React 的本质是理解它的心智模型——这四条是顶层设计，其余都是实现细节。
数据从父到子单向传递，变化可预测、易调试，配合状态提升管理共享数据。
更新状态时创建新引用而非原地修改，这是 React 能高效 diff 的前提。
组件是"props + state → UI"的纯函数，保持纯净才能稳定预测。
理解每次渲染捕获独立 props/state，处理陈旧闭包与竞态问题。
复杂交互、海量组件，React 的函数式模型 + 成熟生态最擅长驾驭这种复杂度。
配合 React Native / 响应式，一套技能覆盖 Web 与移动两端。
图表密集、实时更新，React + ECharts/Recharts 是数据产品的标配。
React 的组件化与可组合性，天生适合构建可共享的 UI 组件库。
性能优化、架构重构、从零开发，我们都能用工程化的方式帮你搞定。
