React 性能优化 — memo/useMemo/useCallback
避免不必要的重渲染，提升 React 应用性能 · 难度：高级 · +20XP
React 性能优化
父组件更新时，默认所有子组件都会重渲染。用memo、useMemo、useCallback 跳过不必要的渲染。
React.memo — 组件记忆
const ExpensiveList = React.memo(function({ items }) {
return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
});
// 仅当 items 引用变化时才重渲染useMemo — 值缓存
const sorted = useMemo(() => {
return items.sort((a,b) => a.score - b.score);
}, [items]); // items 不变就不重新排序useCallback — 函数缓存
const handleAdd = useCallback((id) => {
setItems(prev => [...prev, id]);
}, []); // 函数引用不变，避免子组件重渲染什么时候用？
| 场景 | 用 |
|---|---|
| 纯展示组件 | React.memo |
| 昂贵计算 | useMemo |
| 传给子组件的回调 | useCallback |
不要过早优化！先写清晰代码，遇到性能瓶颈再加。