引言：
在 React 开发中，性能优化是提升用户体验和构建高效应用的关键环节。随着组件数量的增加和状态管理的复杂化，组件的重复渲染问题逐渐显现。为此，React 提供了三个强大的性能优化工具：
useMemo、React.memo、useCallback。它们分别从计算结果缓存、组件渲染优化、函数引用稳定三个方面，帮助我们减少不必要的渲染和计算，提升应用性能。本文将结合这些 Hook 的语法、使用场景、实现原理和最佳实践，系统讲解它们的使用方式和性能优化策略。
一、React 组件渲染机制与父子组件顺序
React 的组件渲染遵循“从外到内”的执行顺序：
- 执行组件函数（构建阶段） ：父组件先执行，依次递归执行子组件。
- 挂载阶段（渲染到 DOM） ：子组件先完成挂载，再返回到父组件。
当状态更新时，React 默认会重新执行组件函数并重新渲染。即使子组件与更新状态无关，也会被重新执行，这可能导致不必要的重渲染和性能浪费。
二、为什么需要性能优化？
以一个简单的 Button 组件为例：
function Button({ onClick }) {
console.log('Button 被重新渲染了');
return <button onClick={onClick}>Click me</button>;
}
如果父组件中的某个状态（如 count）发生变化，即使 Button 没有依赖该状态，它仍然会被重新渲染。这不仅浪费了计算资源，还可能引发不必要的重绘重排。
性能优化的核心目标：
- 减少不必要的渲染
- 避免重复计算
- 保持组件间独立性
三、useMemo：缓存昂贵的计算结果
语法
const memoizedValue = useMemo(() => {
// 执行耗时计算
return computeExpensiveValue(a, b);
}, [a, b]);
computeExpensiveValue(a, b)是一个耗时的计算函数。- 只有当
a或b改变时，才会重新计算这个值。
使用场景
- 避免每次渲染都重复执行高开销的计算（如排序、过滤等）。
- 缓存 JSX 或复杂对象，避免子组件不必要的更新。
- 用于依赖这些值的其他 Hook（如
useEffect）。
注意
- 不要滥用：如果计算本身很快，使用
useMemo反而可能带来额外开销。 - 保持依赖项准确：依赖项不全会导致缓存值过时。
- 不要用于副作用：副作用应该用
useEffect。
四、React.memo：防止子组件不必要渲染
语法
const MemoizedComponent = React.memo(Component, areEqual);
Component是你要优化的子组件。areEqual(prevProps, nextProps)是可选的比较函数，用于自定义 props 的比较逻辑。
默认使用浅比较（shallow compare） ，即只比较 props 的引用地址。
使用场景
- 子组件接收的 props 没有变化时，避免重新渲染。
- 与
useCallback搭配使用，确保函数引用稳定。 - 用于优化大型组件树中的“静态”子组件。
注意
- 只进行浅比较，嵌套对象或数组需要自定义比较函数。
- 不适用于频繁变化的组件，否则会增加性能开销。
- 不要用于所有组件，合理拆分和优化才是关键。
五、useCallback：缓存函数引用，避免子组件无效更新
语法
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
() => doSomething(a, b)是你要缓存的函数。[a, b]是依赖项数组，只有当a或b变化时，才会创建新的函数。
使用场景
- 传递给子组件的回调函数（避免子组件因函数变化而重新渲染）。
- 函数作为依赖项传给其他 Hook（如
useEffect）。 - 避免频繁创建函数对象，减少内存开销。
注意
- 不要滥用：轻量函数没必要缓存。
- 依赖项必须完整：否则可能读取旧闭包。
- 与
React.memo搭配使用效果最佳。
六、三者关系与搭配使用
| 特性 | useMemo | useCallback | React.memo |
|---|---|---|---|
| 缓存内容 | 计算结果 | 函数引用 | 组件实例 |
| 用途 | 避免重复计算 | 避免子组件因函数变化而更新 | 避免子组件因 props 未变而更新 |
| 是否执行函数 | 是（缓存结果） | 否（缓存引用） | 否（缓存组件） |
| 依赖项变化 | 重新计算 | 重新生成函数 | 重新渲染组件 |
小技巧：
useCallback(fn, deps)≈useMemo(() => fn, deps)
示例：三者搭配使用优化组件性能
function ParentComponent() {
const [count, setCount] = useState(0);
const [items] = useState([1, 2, 3, 4, 5]);
const expensiveCalculation = useMemo(() => {
return items.filter(item => item > 2);
}, [items]);
const handleClick = useCallback(() => {
setCount(prev => prev + 1);
}, []);
return (
<div>
<ChildComponent items={expensiveCalculation} onClick={handleClick} />
<p>Count: {count}</p>
</div>
);
}
const ChildComponent = React.memo(({ items, onClick }) => {
return (
<ul>
{items.map(item => (
<li key={item}>{item}</li>
))}
<button onClick={onClick}>Increment</button>
</ul>
);
});
在这个例子中：
useMemo缓存了items.filter的结果，避免每次渲染都重新计算。useCallback缓存了handleClick函数，避免子组件因函数变化而重新渲染。React.memo保证了ChildComponent只有在items或onClick真正改变时才更新。
七、组件划分与性能优化策略
1. 组件划分的粒度
- 粒度越细越好：每个组件只负责一个功能，减少副作用。
- 渲染组件与状态组件分离：渲染组件只接受 props，不做状态管理。
- 单向数据流：保持组件间数据流动清晰，避免副作用。
2. 状态管理与 Context
- 不建议将所有状态放在一个 Context 中，否则每次状态更新都会触发所有依赖该 Context 的组件重新渲染。
- 更推荐使用多个 Context 或
useReducer+useContext按需更新。
3. 热更新与局部更新
- React 的虚拟 DOM Diff 算法会进行局部更新，但前提是组件和 props 都是稳定的。
- 结合
useCallback + React.memo，可以实现更高效的热更新。
八、使用建议与最佳实践
| 场景 | 推荐做法 |
|---|---|
| 复杂计算 | 使用 useMemo |
| 子组件频繁更新 | 使用 React.memo |
| 传递回调函数 | 使用 useCallback |
| 状态更新不频繁 | 不用缓存，保持简单 |
| 大型组件树 | 拆分 + 缓存 + Context 按需使用 |
九、结语：
在 React 应用开发中，useMemo、useCallback 和 React.memo 是优化性能的三大利器。它们分别从缓存计算结果、稳定函数引用、避免子组件重复渲染三个方面，帮助我们构建更高效、更可维护的组件结构。
然而，性能优化并不是越多越好，而是要根据组件的实际使用场景进行合理拆分和缓存。盲目使用这些 Hook 可能适得其反，增加代码复杂度和维护成本。
掌握这些性能优化工具，不仅能提升应用的运行效率，也能加深你对 React 渲染机制和响应式编程的理解。希望这篇文章能帮助你更好地理解 useMemo、useCallback 和 React.memo 的本质与使用技巧，在实际开发中游刃有余。
