如何玩转 React 性能优化三剑客：memo、useMemo、useCallback

2023-05-19 22:14:29

React 性能优化：巧用 memo、useMemo 和 useCallback

随着 React 应用的复杂度日益攀升，性能问题也愈发普遍。为了应对这一挑战，开发者需要掌握各种优化技巧，其中 memo、useMemo 和 useCallback 便是至关重要的性能优化 API。

memo：优化组件渲染

memo 是专门针对 React 函数组件的优化 API。它的作用是通过比较 props 的变化，决定是否重新渲染组件。如果 props 没有变化，则组件将保持原样，避免不必要的渲染开销。

例如，我们有一个名为 Counter 的组件，它显示当前的计数：

const Counter = (props) => {
  return (
    <div>
      Count: {props.count}
    </div>
  );
};

为了优化 Counter 组件的渲染，我们可以使用 memo：

const Counter = memo((props) => {
  return (
    <div>
      Count: {props.count}
    </div>
  );
});

这样，当 count 的值没有变化时，Counter 组件就不会重新渲染。这大大减少了渲染次数，提升了应用性能。

useMemo：优化昂贵计算

useMemo 是针对 React 函数组件中的昂贵计算而设计的。它通过比较 props 和 state 的变化，决定是否重新执行计算。如果 props 和 state 都没有变化，则计算结果将直接从缓存中获取。

例如，我们有一个名为 ExpensiveCalculation 的组件，它执行一个耗时的计算：

const ExpensiveCalculation = (props) => {
  const result = expensiveCalculation(props.value);

  return (
    <div>
      Result: {result}
    </div>
  );
};

为了优化 ExpensiveCalculation 组件的计算，我们可以使用 useMemo：

const ExpensiveCalculation = (props) => {
  const result = useMemo(() => expensiveCalculation(props.value), [props.value]);

  return (
    <div>
      Result: {result}
    </div>
  );
};

这样，当 value 的值没有变化时，ExpensiveCalculation 组件就不会重新计算结果。这有效降低了昂贵计算的执行次数，提高了应用性能。

useCallback：优化函数调用

useCallback 专门针对 React 函数组件中的昂贵函数调用。它通过比较 props 和 state 的变化，决定是否重新创建函数。如果 props 和 state 都没有变化，则函数将从缓存中获取，避免不必要的重新创建。

例如，我们有一个名为 Button 的组件，它有一个点击事件处理函数：

const Button = (props) => {
  return (
    <button onClick={props.onClick}>
      Click me!
    </button>
  );
};

为了优化 Button 组件的事件处理函数，我们可以使用 useCallback：

const Button = (props) => {
  const onClick = useCallback(() => {
    props.onClick();
  }, [props.onClick]);

  return (
    <button onClick={onClick}>
      Click me!
    </button>
  );
};