React hooks 里之 React.memo, useMemo, useCallback 的实用比较

2023-10-30 15:14:08

引言

在 React 生态圈里，有着一类非常重要的技术——React hooks。它允许我们在函数组件中使用状态（state）和生命周期方法。

React hooks 里有许多非常有用的工具，例如 React.memo、useMemo 和 useCallback。

React.memo 是一个高阶组件，它可以用来优化组件的渲染性能，以达到减少不必要的渲染的目的。useMemo 和 useCallback 都是函数，可以用来缓存函数结果，从而提升性能。

今天，我们就要来比较一下这三个 hooks 的用法和优劣势。

React.memo 是一个高阶组件，它接受一个函数组件作为参数，并返回一个新的函数组件。这个新函数组件会对比传入的函数组件的 props，如果 props 没有发生变化，那么就不会重新渲染该组件。

React.memo 的优点是，它可以显著提高组件的渲染性能。尤其是当组件的 props 很复杂或者很深层的时候，React.memo 的效果会更加明显。

React.memo 的缺点是，它可能会导致组件的更新延迟。这是因为 React.memo 会在组件的 props 发生变化后，才重新渲染该组件。

useMemo 是一个函数，它可以用来缓存函数的结果。当函数的参数没有发生变化时，useMemo 会返回缓存的结果，从而避免了函数的重新调用。

useMemo 的优点是，它可以显著提高函数的执行效率。尤其是当函数的执行成本很高的时候，useMemo 的效果会更加明显。

useMemo 的缺点是，它可能会导致内存泄漏。这是因为 useMemo 会一直缓存函数的结果，即使该结果已经不再需要了。

useCallback 是一个函数，它可以用来缓存一个函数的引用。当函数的依赖项没有发生变化时，useCallback 会返回缓存的函数引用，从而避免了函数的重新创建。

useCallback 的优点是，它可以显著提高函数的执行效率。尤其是当函数的创建成本很高的时候，useCallback 的效果会更加明显。

useCallback 的缺点是，它可能会导致内存泄漏。这是因为 useCallback 会一直缓存函数的引用，即使该函数已经不再需要了。

特性	React.memo	useMemo	useCallback
作用	高阶组件，优化组件渲染性能	函数，缓存函数结果	函数，缓存函数引用
优点	显著提高组件的渲染性能	显著提高函数的执行效率	显著提高函数的执行效率
缺点	可能导致组件的更新延迟	可能导致内存泄漏	可能导致内存泄漏
使用场景	组件的 props 很复杂或者很深层的时候	函数的执行成本很高的时候	函数的创建成本很高的时候