用好React Hooks：useCallback、useMemo 和 memo 的锦囊妙计

在React中，当组件的属性或者状态发生变化时，React 会调用组件的 render() 方法重新渲染组件。这个过程可能会非常耗时，尤其是对于大型组件。为了避免重复渲染，我们可以使用以下 Hooks 来优化组件的性能：

useCallback

useCallback Hook 可以帮助我们避免在组件每次重新渲染时创建新函数。这对于那些需要在组件中使用且不会随组件状态改变而改变的函数非常有用。

例如，我们有一个组件，它需要在每次渲染时都调用一个名为 handleClick 的函数。如果没有使用 useCallback Hook，那么每次组件重新渲染时，handleClick 函数都会被重新创建。这可能会导致不必要的性能开销。

为了避免这种情况，我们可以使用 useCallback Hook 来创建一个持久化的 handleClick 函数。这样，handleClick 函数只会重新创建一次，而不是在每次组件重新渲染时都创建。

import { useCallback } from 'react';

const MyComponent = () => {
  const handleClick = useCallback(() => {
    // Do something
  }, []);

  return (
    <button onClick={handleClick}>Click me</button>
  );
};

useMemo

useMemo Hook 可以帮助我们避免在组件每次重新渲染时计算新的值。这对于那些需要在组件中使用且不会随组件状态改变而改变的值非常有用。

例如，我们有一个组件，它需要在每次渲染时都计算一个名为 sum 的值。如果没有使用 useMemo Hook，那么每次组件重新渲染时，sum 值都会重新计算。这可能会导致不必要的性能开销。

为了避免这种情况，我们可以使用 useMemo Hook 来创建一个持久化的 sum 值。这样，sum 值只会计算一次，而不是在每次组件重新渲染时都计算。

import { useMemo } from 'react';

const MyComponent = () => {
  const sum = useMemo(() => {
    // Calculate the sum
    return 1 + 2;
  }, []);

  return (
    <div>The sum is {sum}</div>
  );
};

memo

memo Hook 可以帮助我们避免在组件的子组件发生变化时重新渲染父组件。这对于那些具有大量子组件的组件非常有用。

例如，我们有一个组件，它包含一个子组件列表。如果其中一个子组件发生变化，那么整个父组件都会重新渲染。这可能会导致不必要的性能开销。

为了避免这种情况，我们可以使用 memo Hook 来包裹父组件。这样，父组件只有在自身的状态或者属性发生变化时才会重新渲染。

import { memo } from 'react';

const MyComponent = memo((props) => {
  return (
    <div>
      {props.children}
    </div>
  );
});

通过使用这些 Hooks，我们可以显著地提高组件的性能。