通过 React.memo 对子组件进行浅层 props 比较，可有效阻止其在父组件状态变更但自身接收的 props 实际未变时的不必要重渲染。
通过 `react.memo` 对子组件进行浅层 props 比较，可有效阻止其在父组件状态变更但自身接收的 props 实际未变时的不必要重渲染。
在 React 应用中，当父组件状态（如 useState 或 useReducer 管理的值）更新时，默认会触发整个子树的重新渲染——即使子组件仅依赖于某个未变化的 prop 值。这种行为虽符合 React 的协调机制，但在高频更新或复杂子组件场景下，易引发性能问题。
解决的关键在于：让子组件跳过“无意义”的重渲染。React.memo 是最直接、轻量且推荐的优化手段——它为函数组件提供类似 PureComponent 的浅层 props 对比能力。只有当传入的 props 发生浅层变化（即引用或值不同），React.memo 包裹的组件才会重新执行渲染。
以下是典型实践示例：
import React, { useState, useEffect } from 'react';
// ✅ 使用 React.memo 包裹子组件
const Child = React.memo(({ value, onIncrement }) => {
useEffect(() => {
console.log('Child mounted or value changed');
}, [value]);
return (
<div>
<p>Current value: {value}</p>
<button onclick="{()"> onIncrement()}>Increment in Parent</button>
</div>
);
});
// 父组件
export default function Parent() {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(prev => prev + 1);
};
return (
<div>
<h2>Parent Count: {count}</h2>
{/* ✅ 每次 render 传入的 props 是相同引用（value 和 onIncrement 不变） */}
<child value="{count}" onincrement="{handleIncrement}"></child>
</div>
);
}
⚠️ 注意事项：
- React.memo 默认执行浅比较（shallow comparison）：若 props 中包含对象、数组或内联函数（如 onClick={() => doSomething()}），每次父组件渲染都会生成新引用，导致 memo 失效。此时需配合 useCallback（用于函数）和 useMemo（用于对象/数组）确保稳定引用。
- 它不阻止子组件内部状态或 context 变化引发的渲染，仅作用于 props 变更。
- 对于极简组件（如纯展示 {value}），React.memo 收益有限；应优先在渲染开销大、props 稳定性高的子组件上使用。
- 若需自定义比较逻辑（例如忽略某个 prop），可传入第二个参数 areEqual(prevProps, nextProps)，返回 true 表示跳过更新。
总结：React.memo 是控制子组件渲染节奏的基础防线。结合 useCallback 和 useMemo 统一管理 prop 引用稳定性，即可构建高效、可控的父子通信链路，显著减少无效渲染，提升应用响应性能。
