让React更灵活，提高开发效率——用useMemo和useCallback提升代码性能

2024-01-15 05:00:26

useMemo：缓存计算结果，提高性能

useMemo 是一种性能优化 Hook，它可以缓存函数的计算结果，从而避免不必要的重新计算。当函数的输入没有发生变化时，useMemo 会直接返回缓存的结果，而不会重新执行函数。这可以显著提高代码的性能，尤其是当函数的计算过程非常耗时时。

useMemo 的语法非常简单，如下所示：

const memoizedValue = useMemo(() => {
  // 计算逻辑
}, [dependencies]);

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

缓存昂贵的计算结果：如果某个函数的计算过程非常耗时，我们可以使用 useMemo 来缓存计算结果，从而避免不必要的重新计算。例如，我们可以使用 useMemo 来缓存一个大型数组的排序结果。
避免不必要的重新渲染：如果某个组件的 props 没有发生变化，但组件内部却执行了大量的计算，我们可以使用 useMemo 来避免这些不必要的重新渲染。例如，我们可以使用 useMemo 来缓存一个组件的子组件列表。
优化列表渲染：在渲染列表时，我们可以使用 useMemo 来缓存每个列表项的计算结果，从而避免不必要的重新计算。例如，我们可以使用 useMemo 来缓存每个列表项的格式化文本。

useCallback：缓存函数，提高性能

useCallback 也是一种性能优化 Hook，它可以缓存函数本身，从而避免不必要的重新创建。当函数的依赖项没有发生变化时，useCallback 会直接返回缓存的函数，而不会重新创建函数。这可以显著提高代码的性能，尤其是当函数被频繁调用时。

useCallback 的语法非常简单，如下所示：

const memoizedFunction = useCallback(() => {
  // 函数逻辑
}, [dependencies]);

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

缓存回调函数：如果某个组件经常需要传递回调函数给子组件，我们可以使用 useCallback 来缓存回调函数，从而避免不必要的重新创建。例如，我们可以使用 useCallback 来缓存一个按钮的点击处理函数。
优化事件处理函数：在处理事件时，我们可以使用 useCallback 来缓存事件处理函数，从而避免不必要的重新创建。例如，我们可以使用 useCallback 来缓存一个输入框的输入事件处理函数。
优化列表渲染：在渲染列表时，我们可以使用 useCallback 来缓存每个列表项的事件处理函数，从而避免不必要的重新创建。例如，我们可以使用 useCallback 来缓存每个列表项的点击处理函数。