前端Wiki/词条/React.memo 记忆

React.memo 记忆

定义高阶组件版的性能优化手段，props 不变时跳过子组件的重渲染

React 默认父组件重渲染会连带所有子组件重渲染，哪怕子组件的 props 一个字都没变。React.memo 包裹子组件后，React 会浅比较前后 props：全相等就直接复用上次的渲染结果，跳过本次 render。这对列表项、图表卡片等渲染成本高的组件收益明显。

memo 只做浅比较：props 里如果是对象、数组、函数，每次父组件渲染都会创建新引用，浅比较必然不相等，memo 形同虚设。这时要配合 useMemo 缓存对象型 props、useCallback 缓存函数型 props。自己写第二参数做深比较也是常见做法，但深比较本身有成本，别滥用。

props 基本类型为主时 memo 效果最好，浅比较就能判定不变
对象/函数型 props 必须配合 useMemo/useCallback，否则 memo 失效
memo 是用比较成本换渲染成本，简单组件包 memo 反而更慢

JavaScript

import { memo, useState } from 'react';

const ExpensiveItem = memo(function Item({ text }) {
  console.log('渲染了', text);            // props 不变时不打印
  return <li>{text}</li>;
});

export default function List() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数 {count}</button>
      <ul><ExpensiveItem text="固定文案" /></ul>
    </div>
  );
}

⚠ 常见误区

给 memo 包裹的子组件传内联函数 props，每次都是新引用，优化白做
无论组件多简单都包 memo，比较开销反而拖慢渲染
指望 memo 拦截 state 变化引起的自身重渲染——它只看 props

🔗 相关词条重渲染与 memo useMemo 与 useCallback