理解React Hooks的useMemo，提升应用性能

2023-09-02 16:12:15

React Hooks是什么？

React Hooks是一组在函数组件中使用状态和其它React特性，而无需定义类的新方法。它们使函数组件更加灵活和可重用。

什么是useMemo？

useMemo Hook允许您在函数组件中定义一个 memoized value，它是只读的，除非其依赖项发生改变。这类似于传统的class组件的shouldComponentUpdate生命周期函数，但用在函数组件中。useMemo Hook接受两个参数：一个计算函数和一个依赖项数组。

const memoizedValue = useMemo(() => {
  // 这里执行计算
}, [dependency1, dependency2, ...]);

计算函数只在依赖项发生改变时才会被调用，这可以有效地减少不必要的重新渲染。

useMemo的优点

提升性能：useMemo可以通过减少不必要的重新渲染来提升应用性能。
代码可读性：useMemo可以使代码更具可读性，因为您可以明确地声明哪些状态是memoized的。
可重用性：useMemo可以提高组件的可重用性，因为您可以将memoized value作为prop传递给子组件。

useMemo的用法

useMemo的使用场景非常广泛，以下是一些常见的用法：

缓存昂贵的函数调用：如果您有一个函数调用非常昂贵，您可以使用useMemo来缓存其结果，并在之后的使用中直接使用缓存的结果。
优化列表渲染：如果您有一个列表，并且列表中的每一项都需要进行昂贵的计算，您可以使用useMemo来缓存每一项的计算结果。
优化子组件的渲染：如果您有一个子组件，并且该子组件经常被重新渲染，您可以使用useMemo来缓存子组件的props，并在之后的使用中直接使用缓存的props。

useMemo的代码示例

下面是一个使用useMemo优化列表渲染的代码示例：

const List = () => {
  const items = [1, 2, 3, 4, 5];

  const memoizedItems = useMemo(() => {
    return items.map(item => {
      // 这里执行昂贵的计算
      return item * 2;
    });
  }, [items]);

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

在这个示例中，useMemo用于缓存对items数组的昂贵计算。这意味着，当items数组发生改变时，memoizedItems才会被重新计算。

useMemo与其他Hooks的比较

useMemo与其他一些Hooks有相似之处，但也有着一些区别。以下是对useMemo与其他Hooks的比较：

Hook	相似之处	区别
useMemo	都可以缓存值	useMemo只缓存纯函数的结果，而useCallback可以缓存函数本身
useCallback	都可以缓存值	useCallback只缓存函数本身，而useMemo可以缓存纯函数的结果
useState	都可以管理状态	useState管理组件的内部状态，而useMemo管理组件的外部状态