useCallback

什么是useCallback？有什么作用？

用来优化函数组件的性能。当一个函数组件中包含一个回调函数，并且这个回调函数作为props传递给子组件时，每次组件重新渲染时，这个回调函数都会被重新创建，即使它的依赖项没有发生变化。这可能会导致子组件不必要地重新渲染，从而影响性能。使用useCallback可以缓存这个回调函数，只有当它的依赖项发生变化时才会重新创建。这样可以避免不必要的重新渲染，提高组件的性能。

useCallback的实现原理

当调用useCallback时，它会接收一个回调函数和一个依赖项数组。useCallback会先检查缓存中是否已经存在一个缓存的回调函数，如果存在并且依赖项数组没有发生变化，那么直接返回缓存的回调函数。否则，useCallback会创建一个新的回调函数，并将它缓存起来。

import { useMemo, useRef } from 'react';

function useCallback(callback, deps) {
  const callbackRef = useRef();

  // 将回调函数保存到callbackRef中
  callbackRef.current = callback;

  // 使用useMemo创建缓存的回调函数
  const memoizedCallback = useMemo(() => {
    return function() {
      return callbackRef.current.apply(this, arguments);
    };
  }, deps);

  return memoizedCallback;
}
}