React.memo失效的5大原因及解决方案

React.memo 失效的常见原因及解决方案

React.memo 是 React 提供的高阶组件，用于优化函数组件的渲染性能。它通过浅比较（shallow compare）props 的变化来决定是否重新渲染组件。然而在实际开发中，可能会遇到 React.memo 失效的情况，即组件仍然在不需要时重新渲染。以下是几种常见原因及对应的解决方案。

---

原因一：props 传递了内联函数

内联函数在每次父组件渲染时都会重新创建，导致 React.memo 的浅比较失效。

// 父组件
function Parent() {
  const handleClick = () => console.log("Clicked"); // 每次渲染重新创建
  return <Child onClick={handleClick} />;
}

// 子组件
const Child = React.memo(function Child({ onClick }) {
  return <button onClick={onClick}>Click</button>;
});

解决方法：使用 useCallback 缓存函数。

function Parent() {
  const handleClick = useCallback(() => console.log("Clicked"), []);
  return <Child onClick={handleClick} />;
}

---

原因二：props 传递了内联对象或数组

内联对象或数组在每次渲染时也会重新创建，导致浅比较失败。

// 父组件
function Parent() {
  const config = { color: "red" }; // 每次渲染重新创建
  return <Child config={config} />;
}

解决方法：使用 useMemo 缓存对象或数组。

function Parent() {
  const config = useMemo(() => ({ color: "red" }), []);
  return <Child config={config} />;
}

---

原因三：props 包含动态生成的属性

某些属性可能是动态生成的（如随机值或时间戳），导致每次渲染时 props 不同。

function Parent() {
  const timestamp = Date.now(); // 每次渲染不同
  return <Child timestamp={timestamp} />;
}

解决方法：避免传递动态生成的属性，或将其依赖项纳入 useMemo。

function Parent() {
  const timestamp = useMemo(() => Date.now(), []);