什么时候该选择 useCallback 与 useMemo？

2023-11-06 21:57:11

useCallback 和 useMemo 的工作原理

useCallback 和 useMemo 都是 React 中的 Hook 函数，它们可以让我们在函数组件中使用状态和副作用。但与 useState 和 useEffect 不同的是，useCallback 和 useMemo 都是用来缓存的。

useCallback 可以缓存一个函数，useMemo 可以缓存一个值。当组件重新渲染时，useCallback 会返回相同的函数引用，useMemo 会返回相同的值。这可以帮助我们避免在组件重新渲染时重新创建函数或对象，从而提升性能。

useCallback 和 useMemo 的使用场景有很多，但最常见的是以下几种：

在这种情况下，我们可以使用 useCallback 来缓存子组件的 useEffect 函数，这样当父组件的 props 发生变化时，子组件的 useEffect 函数就不会重新创建。

如果一个组件有多个计时器，我们可以使用 useMemo 来缓存这些计时器，这样当组件重新渲染时，这些计时器就不会重新创建。

如果一个组件使用了大量计算的复杂数据，我们可以使用 useMemo 来缓存这些数据，这样当组件重新渲染时，这些数据就不会重新计算。

useCallback 和 useMemo 虽然可以帮助我们提升性能，但也有一些注意事项需要了解：

useCallback 和 useMemo 都会增加组件的内存消耗。因此，在使用它们之前，需要考虑组件的实际情况，是否真的需要使用 useCallback 和 useMemo。
useCallback 和 useMemo 可能会导致组件的重新渲染延迟。因为 useCallback 和 useMemo 会在组件渲染之前执行，如果 useCallback 和 useMemo 的执行时间过长，可能会导致组件的渲染延迟。
useCallback 和 useMemo 不适合在生产环境中使用。因为 useCallback 和 useMemo 的执行时间是不确定的，如果在生产环境中使用，可能会导致组件的性能不稳定。