如何手写useCallback

useCallback 是 React 中的一个 Hook，用于优化函数组件的性能，避免不必要的重新渲染。如果要手写 useCallback，可以按照以下步骤进行：

1. 创建一个函数组件，接受一个函数和一个依赖数组作为参数：

function useCallback(callback, dependencies) {
  // TODO: 实现 useCallback
}

2. 在函数组件中定义一个 ref 变量，用于存储上一次的依赖数组：

function useCallback(callback, dependencies) {
  const prevDepsRef = useRef(dependencies);
  // TODO: 实现 useCallback
}

3. 判断当前的依赖数组是否和上一次相同，如果相同则返回上一次缓存的回调函数：

function useCallback(callback, dependencies) {
  const prevDepsRef = useRef(dependencies);
  const prevCallbackRef = useRef(callback);

  if (isEqual(dependencies, prevDepsRef.current)) {
    return prevCallbackRef.current;
  }
  // TODO: 实现 useCallback
}

其中，isEqual 函数用于比较两个数组是否相等，可以使用 lodash 库的 isEqual 方法。

4. 如果依赖数组有变化，则使用 useCallback 的实现，创建一个新的回调函数并缓存它：

function useCallback(callback, dependencies) {
  const prevDepsRef = useRef(dependencies);
  const prevCallbackRef = useRef(callback);

  if (isEqual(dependencies, prevDepsRef.current)) {
    return prevCallbackRef.current;
  }

  const newCallback = useCallback(callback);
  prevDepsRef.current = dependencies;
  prevCallbackRef.current = newCallback;
  return newCallback;
}

其中，useCallback(callback) 是 useCallback 的具体实现，它返回一个新的回调函数，该函数的实现和传入的 callback 相同。

最后，需要注意的是，手写 useCallback 只是为了了解其原理，实际开发中应该使用 React 提供的 useCallback 方法。