React 的 useMemo 与 useCallBack 是不是一把梭哈？

2024-01-01 06:46:13

谈起 React 中的优化，useMemo 和 useCallback 是绕不开的话题。它们都是 React 提供的用来提升性能的 Hooks，但它们又有所区别。本文将带你深入理解这两者的差别，并解释为什么 React 不把它们设为默认方法。

useMemo

useMemo 是一个用来缓存计算结果的 Hook。它的第一个参数是一个函数，该函数返回一个值。useMemo 会在组件首次渲染时执行这个函数，并将返回值缓存起来。在组件后续渲染时，useMemo 会直接返回缓存的值，而不重新执行函数。

使用 useMemo 可以显著提升组件的性能，因为它避免了不必要的重新计算。例如，在一个列表中，如果某个子组件的 props 不依赖于列表项的变化，那么就可以使用 useMemo 来缓存子组件的 props，这样当列表更新时，子组件就不需要重新渲染了。

useCallback

useCallback 与 useMemo 类似，但它用来缓存函数本身，而不是函数的返回值。它的第一个参数是一个函数，第二个参数是一个依赖项数组。useCallback 会在组件首次渲染时创建这个函数，并将函数和依赖项数组缓存起来。在组件后续渲染时，useCallback 会检查依赖项数组是否发生变化。如果依赖项没有变化，useCallback 会直接返回缓存的函数。否则，它会重新创建函数。

使用 useCallback 可以提升组件的性能，因为它避免了不必要的函数重新创建。例如，在一个事件处理程序中，如果该事件处理程序不依赖于组件的 props 或状态的变化，那么就可以使用 useCallback 来缓存事件处理程序，这样当组件更新时，事件处理程序就不需要重新创建了。

为什么 React 不把 useMemo 和 useCallback 设为默认方法？

虽然 useMemo 和 useCallback 可以提升组件的性能，但它们也不是万能的。在某些情况下，使用它们反而会降低性能。例如：

当计算结果或函数经常发生变化时。 如果 useMemo 或 useCallback 缓存的值或函数经常发生变化，那么它们反而会成为性能瓶颈。
当组件处于频繁更新状态时。 如果组件处于频繁更新状态，那么 useMemo 和 useCallback 会不断地重新计算或重新创建值或函数，这反而会增加开销。

因此，React 没有把 useMemo 和 useCallback 设为默认方法，而是让开发者根据具体情况决定是否使用它们。