React 函数组件的 re-render 原理与优化
· 6 min read
函数组件 re-render 的根因只有一条：引用变了。state 更新、props 变化、父组件渲染、context 值变化——本质上都是"某个引用不等于上一次的引用"。
- React.memo 决定"要不要渲染"：props 浅比较通过就跳过，不通过就走正常流程
- useCallback / useMemo 保证"引用稳定"：让 memo 的浅比较真正生效，否则每次渲染新引用，memo 形同虚设
- 三者是组合拳：只用 memo 不缓存引用 → 白用；只缓存不用 memo → 也白用
- 拆分组件 +状态下移 往往比加 memo 更治本：把频繁更新的状态隔离在小范围组件内
- 列表用 id 做 key，保证增删排序时最小 DOM 更新；纯分页无排序删除可用 index，反而更高效
- React 19 的 React Compiler 自动处理记忆化，但理解原理仍然是排查性能问题的基础
