React 优化之 React.memo、useMemo、useCallBack，你用对了吗？

2024-02-10 08:52:49

React.memo

React.memo 是一个更高阶组件（HOC），用于优化函数组件的性能。它通过比较前后两次渲染的 props 是否相同来决定是否需要重新渲染组件。如果 props 没有变化，则组件将不会重新渲染，从而减少不必要的开销。

import React, { memo } from 'react';

const MyComponent = memo(({ name }) => {
  console.log('MyComponent rendered');
  return <div>Hello, {name}!</div>;
});

在上面的示例中，我们使用 React.memo 包装了 MyComponent 组件。当 MyComponent 的 props 没有变化时，它将不会重新渲染。这可以提高组件的性能，尤其是在组件内部有昂贵的计算或网络请求时。

useMemo

useMemo 是一个 React Hook，用于在函数组件中缓存计算结果。它接受两个参数：一个计算函数和一个依赖项数组。当依赖项数组中的任何一个值发生变化时，计算函数将重新执行并返回一个新的值。否则，计算函数将返回上一次计算的结果。

import React, { useState, useMemo } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // 计算斐波那契数列的第 n 个数
  const fibonacci = (n) => {
    if (n <= 1) {
      return n;
    }

    return fibonacci(n - 1) + fibonacci(n - 2);
  };

  // 使用 useMemo 缓存计算结果
  const fibonacciValue = useMemo(() => fibonacci(count), [count]);

  return (
    <div>
      Count: {count}
      <br />
      Fibonacci of {count}: {fibonacciValue}
    </div>
  );
};

在上面的示例中，我们使用 useMemo 缓存了斐波那契数列的计算结果。当 count 值发生变化时，fibonacciValue 将重新计算。否则，它将返回上一次计算的结果。这可以提高组件的性能，尤其是当 fibonacci 函数的计算量很大时。

useCallback

useCallback 是一个 React Hook，用于在函数组件中缓存函数。它接受两个参数：一个函数和一个依赖项数组。当依赖项数组中的任何一个值发生变化时，函数将重新创建并返回一个新的函数。否则，函数将返回上一次创建的函数。

import React, { useState, useCallback } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  // 定义一个函数，用于处理点击事件
  const handleClick = () => {
    console.log('Button clicked!');
  };

  // 使用 useCallback 缓存 handleClick 函数
  const memoizedHandleClick = useCallback(handleClick, []);

  return (
    <div>
      Count: {count}
      <br />
      <button onClick={memoizedHandleClick}>Click me!</button>
    </div>
  );
};

在上面的示例中，我们使用 useCallback 缓存了 handleClick 函数。当 count 值发生变化时，memoizedHandleClick 将重新创建。否则，它将返回上一次创建的 handleClick 函数。这可以提高组件的性能，尤其是当 handleClick 函数中有昂贵的计算或网络请求时。