只闻其名不见其人 useCallback、useMemo傻傻分不清?？

作为一名合格的程序员，对函数式编程多少还是有些了解的，理解 useCallback 和 useMemo 也就简单得多。

useCallback 和 useMemo 都是React中用来优化性能的Hooks。

useCallback 返回一个 memoized 回调函数（缓存函数），useMemo 返回一个 memoized 值（缓存值）。

什么时候使用 useCallback

当一个组件需要使用一个函数，并且这个函数在组件的生命周期中不会改变时，可以使用 useCallback。

什么时候使用 useMemo

当一个组件需要使用一个值，并且这个值在组件的生命周期中不会改变时，可以使用 useMemo。

useCallback 和 useMemo 的区别

useCallback 返回一个 memoized 回调函数，useMemo 返回一个 memoized 值。

useCallback 接受一个函数作为参数，useMemo 接受一个值作为参数。

useCallback 返回一个新的函数，useMemo 返回一个新的值。

useCallback 和 useMemo 的相同点

useCallback 和 useMemo 都可以用来优化组件的性能。

useCallback 和 useMemo 都可以接受一个依赖项数组作为参数。

useCallback 和 useMemo 都可以在函数组件和类组件中使用。

useCallback 和 useMemo 的示例

useCallback 示例

const MyComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

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

在这个示例中，我们使用 useCallback 来创建一个 memoized 回调函数 handleClick。这个函数不会在组件的生命周期中改变，因此我们可以将其传递给子组件或在其他地方使用。

useMemo 示例

const MyComponent = () => {
  const memoizedValue = useMemo(() => {
    return calculateExpensiveValue();
  }, []);

  return (
    <div>{memoizedValue}</div>
  );
};

在这个示例中，我们使用 useMemo 来创建一个 memoized 值 memoizedValue。这个值不会在组件的生命周期中改变，因此我们可以在组件中多次使用它，而无需每次都重新计算它。

总结

useCallback 和 useMemo 都是非常有用的 Hooks，可以帮助我们优化 React 组件的性能。

useCallback 可以用来创建一个 memoized 回调函数，useMemo 可以用来创建一个 memoized 值。

useCallback 接受一个函数作为参数，useMemo 接受一个值作为参数。

useCallback 返回一个新的函数，useMemo 返回一个新的值。

useCallback 和 useMemo 都可以接受一个依赖项数组作为参数。

useCallback 和 useMemo 都可以在函数组件和类组件中使用。