React Hooks 深入浅出：memo()、useCallback() 和 useMemo()

2023-10-25 10:48:14

在现代前端开发中，React Hooks 提供了一种强大的方式来管理组件的状态和生命周期。特别是 memo()、useCallback() 和 useMemo() 这三个 Hooks，它们在优化组件性能方面发挥着关键作用。本文将深入探讨这三个 Hooks 的用法及其区别，并提供相应的代码示例。

memo()

React.memo() 是一个高阶组件，用于优化函数组件的性能。它通过浅层比较 props 的变化来决定是否重新渲染组件。如果 props 没有变化，memo() 会阻止组件重新渲染，从而减少不必要的渲染次数。

const MyComponent = React.memo((props) => {
  // 组件代码
});

使用场景

当你的组件依赖于 props，并且这些 props 不经常变化时，使用 memo() 可以显著提高性能。例如，当一个组件接收大量数据作为 props，但这些数据在大多数情况下不会改变时，使用 memo() 可以避免不必要的渲染。

useCallback()

React.useCallback() 用于创建回调函数，这些回调函数在组件的生命周期内保持不变。即使组件重新渲染，这些回调函数也不会被重新创建，从而减少了子组件的不必要渲染。

const MyComponent = () => {
  const handleClick = useCallback(() => {
    // 回调函数代码
  }, []);

  return (
    <button onClick={handleClick}>点击我</button>
  );
};

使用场景

当你在组件中传递回调函数给子组件时，使用 useCallback() 可以避免子组件因为父组件的重新渲染而重新渲染。特别是在使用 React.memo() 包装的子组件中，useCallback() 可以确保传递的回调函数引用不变。

useMemo()

React.useMemo() 用于创建派生状态。派生状态是根据其他状态计算出来的状态。useMemo() 会对派生状态进行缓存，并在组件重新渲染时检查派生状态是否发生变化。如果派生状态没有变化，useMemo() 会直接返回缓存的派生状态，而不会重新计算。

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const doubledCount = useMemo(() => {
    return count * 2;
  }, [count]);

  return (
    <>
      <p>Count: {count}</p>
      <p>Doubled Count: {doubledCount}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
};