当前位置：首页 > news >正文

React.memo、useMemo、useCallback性能优化总结

news 来源：原创 2025/6/19 10:54:17

在React中，React.memo、useMemo和useCallback都是用于优化性能的工具，但它们各自有不同的使用场景和目的。下面我将分别解释这三个API的用法和它们的主要区别。

1. React.memo

React.memo 是一个高阶组件（HOC），用于优化函数组件的性能，通过记忆组件渲染结果来避免不必要的重新渲染。

使用方法：

const MyComponent = React.memo(function MyComponent(props) {
  // 组件实现
});

或者使用第二个参数来指定具体的比较逻辑：

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  // 返回 true 表示不需要重新渲染
  // 返回 false 表示需要重新渲染
  return prevProps.id === nextProps.id;
});

2. useMemo

useMemo是一个Hook，用于缓存计算结果。它只在依赖项改变时重新计算值。这对于那些计算代价高昂且结果可以被缓存的情况非常有用。

使用方法：

const memoizedValue = useMemo(() => {
  // 进行计算并返回结果
  return computeExpensiveValue(a, b);
}, [a, b]); // 依赖项数组，空数组时只有初始化的时候执行，没有依赖参数项state每次变化都会引起重新执行，有依赖数组室，依赖数据发生变化才会触发重新执行

3. useCallback

useCallback也是一个Hook，它返回一个记忆化的回调函数。这在父组件传递给子组件的回调函数不会频繁改变时非常有用，可以防止子组件不必要的渲染。

使用方法

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b], // 依赖项数组
); // 这里，当依赖项（如a或b）不变时，返回的回调函数引用将保持不变，从而避免了子组件的额外渲染。

主要区别和选择：

使用场景：
React.memo：用于优化组件的渲染性能，避免不必要的组件重新渲染。
useMemo：用于缓存昂贵的计算结果，避免在每次渲染时都进行计算。注：简单的计算就没必要使用。
useCallback：用于缓存回调函数，避免因父组件的重新渲染而导致的子组件不必要的渲染。
返回值类型：
React.memo：返回一个新组件。
useMemo：返回一个记忆化的值。
useCallback：返回一个记忆化的回调函数。
性能优化时机：
React.memo：在组件级别进行优化。
useMemo 和 useCallback：在组件内部进行优化，特别是在需要精确控制哪些变量影响渲染的情况下。