在React应用开发中，随着组件树的规模不断增大，很多开发者会察觉到页面响应变慢、交互卡顿的现象。根本原因往往并不复杂：React的默认渲染策略是自上而下、无差别的。只要父组件触发了一次状态更新，它的所有子组件都会重新执行渲染函数，无论这些子组件接收的props是否真正发生了变化。这种机制在小型应用中无伤大雅，但当组件数量成百上千，或者某些子组件的渲染开销很高时，就会造成明显的性能浪费。React官方为此提供了React.memo、useMemo和useCallback三种优化工具，它们各自解决不同层面的问题，但同时也带来了更高的使用门槛。理解它们的适用时机，比记住API本身更为重要。
React的默认渲染机制与性能瓶颈
理解React.memo等优化手段之前，需要先明确React的渲染触发条件。在函数组件中，当组件自身的state发生变化，或者父组件重新渲染时，该组件就会重新执行函数体，生成新的虚拟DOM，然后与旧的虚拟DOM进行diff比较，最后更新真实DOM。这里的关键点是：父组件重新渲染时，子组件的props即使完全一样，子组件依然会重新执行一遍。因为React无法提前知道子组件是否依赖了props的变化，它只能采用最保守的策略。
举个例子，一个包含输入框的父组件和一个展示静态数据的子组件组合在一起。用户在输入框中每敲一个字符，父组件的state就会更新，进而导致子组件也被迫重新渲染。如果子组件内部执行了复杂的计算或者渲染了大量列表，这种不必要的渲染就会拖慢输入响应速度。以下代码演示了这一情况：
function Parent() {
const [text, setText] = useState('');
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
<ExpensiveList />
</div>
);
}
function ExpensiveList() {
console.log('ExpensiveList rendered');
// 这里可能包含大量DOM节点或复杂计算
return <ul>{Array.from({ length: 1000 }, (_, i) => <li key={i}>Item {i}</li>)}</ul>;
}
在上述代码中，每次输入框内容改变，ExpensiveList组件都会重新渲染，即使它完全不需要依赖text。这正是React.memo要解决的问题。
React.memo：跳过不必要的子组件渲染
React.memo是一个高阶组件，它通过浅比较props来决定是否跳过子组件的重新渲染。具体来说，React.memo包装后的组件会记录上一次渲染时的props，当新一次渲染到来时，它会对新旧props的每个字段进行浅比较（即Object.is比较，对于对象只比较引用）。如果所有props都相同，React就会直接复用上一次的渲染结果，跳过组件函数的执行和后续diff。
使用方式很简单，将函数组件作为参数传入React.memo即可。下面的代码对之前的ExpensiveList进行了优化：
const ExpensiveList = React.memo(function ExpensiveList() {
console.log('ExpensiveList rendered');
return <ul>{Array.from({ length: 1000 }, (_, i) => <li key={i}>Item {i}</li>)}</ul>;
});
现在，当父组件因输入框state变化而重新渲染时，ExpensiveList没有接收任何props，浅比较认为没有变化，于是就不会重新渲染。这可以显著减少不必要的渲染开销。
然而，React.memo并非万能。浅比较只对基本类型和引用类型有效。如果传递给子组件的props中包含对象、数组或函数，那么即使内容没变，但只要引用发生了变化，浅比较就会判定为不相等，导致memo失效。例如下面这个用法：
function Parent() {
const [text, setText] = useState('');
const user = { name: 'Alice' }; // 每次渲染都会创建新对象
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
<UserProfile user={user} />
</div>
);
}
const UserProfile = React.memo(function UserProfile({ user }) {
console.log('UserProfile rendered');
return <div>{user.name}</div>;
});
虽然user的内容没有变化，但由于父组件每次渲染都会创建一个新的对象，user的引用不断变化，所以React.memo认为props变了，UserProfile依然会重新渲染。要解决这个问题，就需要配合useMemo或useCallback来稳定引用。
useMemo：缓存计算结果，避免重复执行高开销逻辑
useMemo用于缓存一个计算的结果。它接收一个工厂函数和一个依赖数组，只有当依赖数组中的值发生变化时，才会重新执行工厂函数并返回新结果；否则返回之前缓存的结果。它的主要用途是避免在每次渲染时都执行昂贵的数据处理，比如对大数组进行过滤、排序、复杂数学运算等。
一个典型场景是从后端获取了一个较大的商品列表，组件渲染时根据筛选条件对列表进行过滤。如果不加处理，每次渲染都会重新过滤一遍，即使筛选条件没有变化，也会浪费CPU资源。使用useMemo可以缓存过滤结果：
function ProductList({ products, category }) {
const filteredProducts = useMemo(() => {
return products.filter(p => p.category === category);
}, [products, category]);
return (
<ul>
{filteredProducts.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}
只有当products或category发生变化时，过滤逻辑才会重新执行。如果父组件因为其他state变化而重新渲染，ProductList依然使用上次缓存好的filteredProducts，省去了重复计算。
但需要注意，useMemo本身也有开销，它需要在内存中保存缓存值，并且每次渲染都要进行依赖比较。因此，只有在计算量确实较大、或者计算结果被传递给使用了React.memo的子组件时才值得使用。对于简单的计算，直接计算反而更高效。
useMemo还常被用来稳定对象引用，以配合React.memo。回顾前面UserProfile的例子，我们可以将user对象用useMemo包裹：
function Parent() {
const [text, setText] = useState('');
const user = useMemo(() => ({ name: 'Alice' }), []); // 依赖数组为空，引用永远不会变
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
<UserProfile user={user} />
</div>
);
}
这样，user的引用在整个组件生命周期内保持不变，React.memo包装的UserProfile就不会因为父组件的无关更新而重新渲染。
useCallback：稳定函数引用，避免子组件无关更新
useCallback与useMemo类似，不过它缓存的是函数本身而不是函数执行的结果。它接收一个内联函数和一个依赖数组，返回该函数的记忆化版本。当依赖数组不变时，返回的函数引用保持不变。这在将回调函数传递给使用React.memo的子组件时非常有用。
考虑一个场景：父组件包含一个按钮列表，每个按钮点击时调用父组件传递的回调。该回调可能使用了父组件的某个state。如果不加处理，父组件每次渲染都会生成一个新的回调函数，即使该state没有变化，导致子组件因为回调prop的引用变化而重新渲染。
以下是一个未优化的例子：
function Parent() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
const handleClick = () => {
setCount(c => c + 1);
};
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
<Button onClick={handleClick} />
</div>
);
}
const Button = React.memo(function Button({ onClick }) {
console.log('Button rendered');
return <button onClick={onClick}>Click me</button>;
});
输入框内容改变时，Parent重新渲染，handleClick每次都会被重新创建，Button虽然被React.memo包裹，但其onClick prop的引用变了，所以Button仍会重新渲染。使用useCallback可以解决：
function Parent() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []); // 空依赖数组，函数引用稳定
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
<Button onClick={handleClick} />
</div>
);
}
现在，只要count不变，handleClick的引用就是稳定的，Button组件在输入框内容变化时就不会重新渲染。
需要特别注意的是，useCallback并不是用来提升性能的银弹，它只是保证引用稳定。如果回调函数内部使用了state或props，必须将它们加入依赖数组，否则可能捕获到过期的值，导致闭包陷阱。例如，如果handleClick依赖了count的值，而依赖数组写成了空数组，那么count将永远是初次渲染时的值。
使用时机与优化策略总结
React.memo、useMemo和useCallback三者经常被组合使用，但滥用它们反而会降低代码可读性并增加维护成本。一个常见的错误是无论组件大小、props复杂度如何，一律加上React.memo和useCallback，这会导致大量的依赖数组管理，而且记忆化本身也需要存储和比较开销，对于轻量组件来说得不偿失。
正确的思路是先测量，再优化。使用React DevTools的Profiler面板或者浏览器性能工具，找出真正渲染开销大的组件。优化优先级通常是：先检查是否可以用更合理的组件拆分来减少渲染范围，然后对开销大的子组件使用React.memo，如果props中存在对象或函数，再进一步用useMemo和useCallback稳定引用。
此外，记住几种典型的适用场景：对于渲染成本高且经常接收相同props的组件，使用React.memo能够带来明显收益；对于计算密集型的派生数据，使用useMemo可以避免重复计算；对于将回调传给多个子组件且子组件已使用React.memo的情况，使用useCallback能防止子组件因回调引用变化而重新渲染。如果一个组件本身渲染很快，或者props几乎每次都在变化，那么这些优化手段可能毫无意义，甚至产生反效果。
总之，React性能优化是一门权衡的艺术。理解React的渲染机制和这些API的底层原理，结合具体的应用场景和性能数据，才能做出合理的取舍。盲目套用优化技巧不仅不能解决问题，还可能让代码变得难以维护。
React性能优化React.memouseCallback修改时间：2026-09-23 20:23:28