详解 React.memo 的更新机制

0React.memo 的基本作用

我们在开发中，对于一些开销较大且 props 不经常变动的子组件，通常使用 memo 优化处理。默认情况下，当父组件重渲染时，其所有子组件都会无条件跟随重渲染，无论子组件的 props 是否发生变化。React.memo 的作用就是：对被包裹的函数组件进行"props 浅比较"，如果 props 没有变化，则阻止子组件重渲染。

// 未使用 memo：父组件重渲染时，Child 必然重渲染
const Child = (props) => { ... }

// 使用 memo：仅当 props 变化时，Child 才重渲染
const MemoizedChild = React.memo(Child);

1如何判断"props 没变化"：浅比较规则

React.memo 默认使用浅比较（shallow comparison）来判断 props 是否变化：

// 父组件
const Parent = () => {
  // 每次 Parent 重渲染，都会创建新的对象（引用地址变化）
  const user = { name: "张三" };

  return <MemoizedChild user={user} />;
};

// 子组件（被 memo 包裹）
const Child = ({ user }) => { ... };
const MemoizedChild = React.memo(Child);

2特殊情况：函数 / 事件处理函数

函数也是引用类型，同样遵循"引用地址比较"规则。如果父组件在渲染时动态创建函数，会导致子组件 props 中函数的引用变化，进而触发重渲染：

// 父组件
const Parent = () => {
  // 每次重渲染都会创建新的函数（引用变化）
  const handleClick = () => { console.log("点击"); };

  return <MemoizedChild onClick={handleClick} />;
};

解决办法：使用 useCallback 缓存函数引用，确保每次渲染时函数引用不变：

import { useCallback } from 'react';

const Parent = () => {
  // 用 useCallback 缓存函数，引用地址不变
  const handleClick = useCallback(() => {
    console.log("点击");
  }, []); // 依赖为空，函数始终不变

  return <MemoizedChild onClick={handleClick} />;
};

3自定义比较逻辑：第二个参数

如果默认的浅比较满足不了需求（比如需要深比较对象内容），可以给 React.memo 传递第二个参数（一个比较函数），自定义判断逻辑：

// 自定义比较函数：比较 user 对象的内容是否相同
const arePropsEqual = (prevProps, nextProps) => {
  return prevProps.user.name === nextProps.user.name;
};

// 使用自定义比较函数的子组件
const MemoizedChild = React.memo(Child, arePropsEqual);

4五个实战场景拆解重渲染时机

场景 1：props 包含基础类型 + 对象（对象引用变化）

// 子组件（被 memo 包裹）
const MemoizedChild = React.memo(({ count, user }) => {
  console.log("子组件渲染了");
  return <div>{count} - {user.name}</div>;
});

// 父组件
const Parent = () => {
  const [count, setCount] = useState(0);
  // 每次父组件重渲染，都会创建新对象（引用变化）
  const user = { name: "张三" };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>加1</button>
      <MemoizedChild count={count} user={user} />
    </div>
  );
};

场景 2：props 包含基础类型 + 对象（对象引用不变）

// 父组件改进：用 useMemo 缓存对象引用
const Parent = () => {
  const [count, setCount] = useState(0);
  // 用 useMemo 缓存对象，依赖为空时引用不变
  const user = useMemo(() => ({ name: "张三" }), []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>加1</button>
      <MemoizedChild count={count} user={user} />
    </div>
  );
};

场景 3：props 包含函数（函数引用变化）

// 子组件
const MemoizedChild = React.memo(({ onSubmit, config }) => {
  console.log("子组件渲染了");
  return <button onClick={onSubmit}>{config.text}</button>;
});

// 父组件
const Parent = () => {
  const config = useMemo(() => ({ text: "提交" }), []);
  // 每次渲染创建新函数（引用变化）
  const handleSubmit = () => {
    console.log("提交");
  };

  return <MemoizedChild onSubmit={handleSubmit} config={config} />;
};

场景 4：props 包含函数（引用不变）+ 基础类型（值不变）

// 父组件改进：用 useCallback 缓存函数
const Parent = () => {
  const [text, setText] = useState("");
  const config = useMemo(() => ({ text: "提交" }), []);

  // 用 useCallback 缓存函数，引用不变
  const handleSubmit = useCallback(() => {
    console.log("提交:", text);
  }, [text]); // 依赖 text，text 变化时函数才更新

  return <MemoizedChild onSubmit={handleSubmit} config={config} />;
};

场景 5：部分 props 变化，部分不变

// 子组件
const MemoizedChild = React.memo(({ a, b, c }) => {
  console.log("子组件渲染了");
  return <div>{a} - {b.name} - {c()}</div>;
});

// 父组件
const Parent = () => {
  const [a, setA] = useState(1);
  const b = useMemo(() => ({ name: "固定值" }), []); // 不变
  const c = useCallback(() => "固定函数", []); // 不变

  return (
    <div>
      <button onClick={() => setA(a + 1)}>修改a</button>
      <MemoizedChild a={a} b={b} c={c} />
    </div>
  );
};

5总结 & 术语表

注意事项

术语表