React.memo、useMemo 和 React.PureComponent的区别

useMemo 和 React.memo 都是 React 提供的性能优化工具，但它们的作用和使用场景有显著不同。以下是两者的全面对比：

一、核心区别总结

二、useMemo 深度解析

1、基本用法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

2、主要特点

• 缓存计算值：只有当依赖项变化时才重新计算
• 组件内部使用：只能在函数组件或自定义Hook中使用
• 不阻止渲染：只是优化计算过程，不影响组件是否渲染

3、典型场景

function Component({ items }) {
  // 只有items变化时才重新计算排序结果
  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a.value - b.value);
  }, [items]);

  return <List items={sortedItems} />;
}

三、React.memo 深度解析

1、基本用法

const MemoizedComponent = React.memo(Component, arePropsEqual?);

注意：这里传递了第二个参数，它是一个自定义比较函数，用于决定是否跳过重新渲染 比如下面案例中 当判断条件为true时候 跳过渲染

2、主要特点

• 组件记忆化：对组件进行浅比较，props不变时跳过渲染
• 类似PureComponent：用于函数组件的shouldComponentUpdate
• 可自定义比较：通过第二个参数控制比较逻辑

3、典型场景

const Child = React.memo(function Child({ data }) {
  return <div>{data.value}</div>;
});

function Parent() {
  const [count, setCount] = useState(0);
  
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Re-render Parent</button>
      <Child data={{ value: "Static" }} /> {/* 不会随Parent重渲染 */}
    </>
  );
}

四、关键区别

1、作用层次不同

• useMemo：优化组件内部的计算过程
• React.memo：优化整个组件的渲染行为

2、依赖检测方式

// useMemo 显式声明依赖
const value = useMemo(() => a + b, [a, b]);

// React.memo 自动浅比较props
const MemoComp = React.memo(Comp);
// 或自定义比较
const MemoComp = React.memo(Comp, (prev, next) => prev.id === next.id); // 当上一次值和这次值的id 不一样的时候  就会触发渲染

3、性能影响对比

五、联合使用示例

// 优化计算 + 优化渲染的完美组合
const ExpensiveComponent = React.memo(function({ items }) {
  const processedItems = useMemo(() => {
    return items.map(item => ({
      ...item,
      fullName: `${item.firstName} ${item.lastName}`
    }));
  }, [items]);

  return (
    <ul>
      {processedItems.map(item => (
        <li key={item.id}>{item.fullName}</li>
      ))}
    </ul>
  );
});

function Parent() {
  const [count, setCount] = useState(0);
  const [items] = useState([...]);
  
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Render {count}</button>
      <ExpensiveComponent items={items} /> 
      {/* 父组件重渲染时，子组件不会重新渲染 */}
    </>
  );
}

六、使用建议

• 优先考虑 React.memo：当需要防止不必要的子组件重渲染时
• 合理使用 useMemo：对于计算量大的派生数据
• 不要过度优化：简单的组件和计算不需要使用
• 注意引用类型：两者都依赖浅比较，注意对象/数组的引用稳定性

七、常见误区

1、错误期待

// 以为能阻止子组件渲染（实际无效）
const Child = () => {
  const data = useMemo(() => ({ value: 1 }), []);
  return <div>{data.value}</div>;
}
// 正确做法是用React.memo包裹组件

2、错误依赖

// 依赖项不全可能导致过时闭包
const value = useMemo(() => a + b + c, [a, b]); // 缺少c

3、错误嵌套

// 不需要用useMemo缓存React.memo组件
const MemoComp = useMemo(() => React.memo(Comp), []); // 多余

八、React.memo和React.PureComponent区别

1、PureComponent 的核心作用

• 自动实现 shouldComponentUpdate()普通 React.Component 在父组件更新或自身状态变化时总会重新渲染，而 PureComponent 会先浅比较 props 和 state，只有数据真正变化时才会触发渲染
• 避免不必要的渲染，适用于数据变化不频繁或props/state 是简单类型（非深层嵌套对象） 的场景。

2、与 React.Component 的区别

3、适用场景

✅ 推荐使用 PureComponent 的情况：

• props/state 是基本类型（string, number, boolean 等）
• props/state 是简单对象（没有深层嵌套）
• 组件渲染成本高（如长列表、复杂计算）

❌ 不推荐使用 PureComponent 的情况：

• props/state 包含深层嵌套对象（浅比较无法检测内部变化）
• 使用了可变数据（如直接修改数组或对象）
• 需要自定义 shouldComponentUpdate 逻辑

4、代码示例

import React from 'react';

// 使用 PureComponent 替代 Component
class MyComponent extends React.PureComponent {
  render() {
    console.log("只有 props/state 变化时才会重新渲染！");
    return <div>{this.props.value}</div>;
  }
}

5、注意事项

1、 浅比较（shallow compare）的局限性：PureComponent 只对比 props/state 的第一层，如果数据是深层嵌套的（如 { user: { name: ‘Alice’ } }），修改 user.name 不会触发重新渲染（因为 user 对象的引用没变
2、避免直接修改 state（应使用不可变数据）

// ❌ 错误：直接修改数组，PureComponent 无法检测变化
this.state.items.push(newItem);
this.setState({ items: this.state.items }); // 不会触发重新渲染

// ✅ 正确：返回新数组
this.setState({ items: [...this.state.items, newItem] }); // 会触发重新渲染

九、PureComponent 和 React.memo 的区别

1、适用组件类型不同

2、比较方式

两者都默认使用 浅比较（shallow compare），但 React.memo 更灵活：

• PureComponent：自动比较 props 和 state，只要其中任何一个变化就重新渲染
• React.memo：默认只比较 props（函数组件没有 state），但可以自定义比较逻辑

3、对 state 的处理

4、使用场景

✅ PureComponent 适用场景：

• Class 组件，且 props/state 是简单数据类型或浅层对象
• 不需要自定义 shouldComponentUpdate 逻辑

✅ React.memo 适用场景：

• 函数组件，且 props 是简单数据类型或浅层对象
• 需要自定义比较逻辑（如深层比较某些 props）

5、代码对比

（1）PureComponent（Class 组件）

import React from 'react';

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

（2）React.memo（函数组件）

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});