react Hooks之useMemo、useCallback

一、useMemo

1、作用：

用于对值的计算进行缓存，以避免重复计算。它可以帮助优化性能，特别是在处理昂贵的计算操作时非常有用。如何可以对比的话，我猜应该和vue中的计算属性差不多吧。

2、用法：

在使用 useMemo 时，你需要传入一个计算函数和一个依赖项数组作为参数。useMemo 会返回计算函数的结果，并且只有当依赖项发生变化时才会重新计算值，否则将返回上一次缓存的值。

3、示例：

import { useMemo } from 'react';

function Example({ data }) {
  const expensiveValue = useMemo(() => {
    // 进行昂贵的计算操作
    let result = 0;
    for (let i = 0; i < data.length; i++) {
      result += data[i];
    }
    return result;
  }, [data]); // 依赖项为 data

  return <div>Expensive value: {expensiveValue}</div>;
}

在这个示例中，我们使用了 useMemo 来缓存一个计算结果 expensiveValue。每当 data 发生变化时，useMemo 中的计算函数将被调用以重新计算 expensiveValue。如果 data 没有发生变化，useMemo 将返回上一次缓存的值，而不会重新计算。

这样做可以有效地避免在每次渲染时都进行昂贵的计算操作，从而提高应用程序的性能。

二、useCallback

1、作用：

用于缓存函数的引用，以避免在每次渲染时都创建新的函数。

2、用法：

useCallback 接受一个函数和一个依赖项数组作为参数，并返回一个缓存的函数引用。

3、示例：

import { useState, useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Button clicked!');
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}

在这个示例中，我们使用 useState 来维护一个计数器 count。然后，我们使用 useCallback 缓存了一个处理点击事件的函数 handleClick。

每当点击 "Increase" 按钮时，handleClick 函数会被调用，并且 count 会增加。由于我们使用了 useCallback 缓存了 handleClick 函数，它在每次渲染时都保持相同的引用，这样不会导致子组件的不必要重新渲染。

所以，通过使用 useCallback，我们可以优化函数的性能，并避免不必要的重新渲染。

对比总结一下：

useMemo

• 用于缓存值，避免重复计算。
• 接收一个计算函数和依赖项数组作为参数。
• 在组件重新渲染时，只有依赖项发生变化时才会重新计算值，否则返回上一次缓存的值。
• 常用于优化昂贵的计算操作，例如处理大量数据或复杂的计算逻辑

useCallback

• 用于缓存函数，避免函数在每次渲染时重新创建。
• 接收一个回调函数和依赖项数组作为参数。
• 在组件重新渲染时，只有依赖项发生变化时才会重新创建函数，否则返回上一次缓存的函数。
• 常用于优化父组件向子组件传递的回调函数，以及避免子组件的不必要重新渲染。

总结：

当需要缓存并重复使用计算结果时，使用 useMemo。

当需要缓存并重复使用函数时，使用 useCallback。

在两者的依赖项数组中，都应该列出所有影响结果或函数创建的依赖项。

注意事项：

1、使用条件：useMemo 和 useCallback 都用于优化性能，避免不必要的重复计算或函数重新创建。因此，只有在有必要时才使用它们，而不是滥用。

2、依赖数组：useMemo 和 useCallback 都接受一个依赖数组作为参数。该数组用于指定在依赖项发生变化时才重新计算或重新创建。务必小心地指定依赖项，确保只有当这些依赖项发生变化时才触发重新计算或重新创建。如果不指定依赖项数组，它们将在每次渲染时都重新计算或重新创建。

3、对象和函数的引用：useMemo 和 useCallback 会根据依赖项是否发生变化来判断是否重新计算或重新创建返回值。对于对象和函数，它们使用的是引用比较。如果依赖项中包含对象或函数，并且其引用未发生变化，那么 useMemo 和 useCallback 将返回之前的缓存值，而不会重新计算或重新创建。

4、性能优化：useMemo 和 useCallback 的目的是进行性能优化。但是过度使用它们可能会导致代码复杂性增加，降低代码可读性。只有当你确实遇到了性能问题，并且经过测试证明使用这些 Hook 可以提升性能时，才值得使用它们