useCallback原理

useCallback 原理是基于 memoization 技术。memoization 是一种缓存技术，它可以在函数输入不变的情况下，缓存函数的输出结果。当函数再次被调用时，如果输入和之前一致，就直接返回缓存的输出结果，从而避免重复计算，提高函数执行效率。

useCallback 就是通过 memoization 技术，缓存函数的输出结果，从而避免重复创建函数对象。当依赖项数组不变时，useCallback 返回的函数对象就是之前缓存的函数对象，否则会重新创建函数对象。

useCallback 的使用场景通常是在子组件中使用，避免在父组件多次渲染时，重复创建函数对象，从而避免对子组件产生不必要的重渲染。同时也可以在 useEffect 的依赖项数组中使用 useCallback，避免多次创建依赖项函数，从而更好的优化 React 组件性能。

相关问题

如何手写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 方法。

react useMemo 原理

React 的 useMemo 和 useCallback 都是为了优化 React 中的性能而设计的。

useMemo 的原理是利用 memoization（记忆化）技术将函数的结果缓存起来。在依赖项没有发生变化的情况下， useMemo 会直接返回缓存的结果，避免了重复计算的问题。当依赖项发生变化时， useMemo 会重新执行函数，并缓存新的结果。

useMemo 接收两个参数：第一个参数是一个回调函数（要被缓存的函数），第二个参数是一个数组，表示函数所依赖的变量。如果没有依赖项，则可以将其省略，useMemo 将不会重复计算。

例如，下面的代码演示了如何使用 useMemo 缓存一个计算结果：

const memoizedValue = useMemo(() => {
  // 计算结果
  return someExpensiveComputation(a, b);
}, [a, b]);

上面的代码中，仅当 a 或 b 发生变更时，useMemo 才会重新执行回调函数，否则会直接返回缓存的结果 memoizedValue。

总的来说，useMemo 可以有效地优化 React 应用程序的性能，在遇到性能问题时可以考虑使用。