React.memo 和 memoize 函数的区别

问题

React.memo 和 JavaScript 的 memoize 函数有什么区别？

解答

React.memo 和 memoize 函数都用于缓存结果以提升性能，但它们的设计目标和实现方式不同。

适用范围

React.memo 是 React 提供的高阶组件，专门用于优化函数组件的渲染性能：

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

memoize 函数是通用的 JavaScript 函数缓存工具，可用于任何函数：

function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) return cache[key];
    const result = fn.apply(this, args);
    cache[key] = result;
    return result;
  };
}

const expensiveCalculation = memoize((a, b) => {
  return a * b * Math.random();
});

缓存策略

React.memo 通过浅比较 props 决定是否重新渲染，只比较第一层属性：

// 只有当 props.name 或 props.age 改变时才重新渲染
const User = React.memo(({ name, age }) => {
  return <div>{name} - {age}</div>;
});

memoize 函数将参数序列化为字符串作为缓存键，对于复杂对象需要自定义键值计算：

// 基本类型参数可以直接缓存
const add = memoize((a, b) => a + b);

// 对象参数需要自定义缓存策略
const customMemoize = (fn, keyGenerator) => {
  const cache = new Map();
  return function(...args) {
    const key = keyGenerator(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
};

应用场景

React.memo 适合优化渲染不频繁的组件：

// 列表项组件，props 不常变化
const ListItem = React.memo(({ id, title }) => {
  return <li>{title}</li>;
});

memoize 函数适合缓存计算密集型操作：

// 斐波那契数列计算
const fibonacci = memoize((n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});

关键点

• React.memo 是 React 高阶组件，用于优化组件渲染；memoize 是通用函数缓存工具
• React.memo 使用浅比较 props，memoize 通过参数序列化生成缓存键
• React.memo 适合优化纯组件，memoize 适合缓存耗时计算
• React.memo 可传入自定义比较函数，memoize 可自定义键值生成策略