[React]useMemoizedFn和useCallback对比

`useMemoizedFn` 和 `useCallback` 都是优化 React 组件性能的钩子。它们的作用是缓存函数的结果，以避免在每次渲染时重新创建函数。

`useMemoizedFn` 是一个自定义的 hook，它接受一个函数作为参数，并返回一个被缓存的函数。这个缓存的函数会在每次渲染时保持不变，直到依赖项发生变化。当依赖项发生变化时，`useMemoizedFn` 会重新计算并返回一个新的缓存函数。

import { useMemo } from 'react';

function useMemoizedFn(fn, deps) {
  const memoizedFn = useMemo(() => fn, deps);
  return memoizedFn;
}

`useCallback` 也是一个 React 提供的 hook，它接受一个函数和一个依赖项数组作为参数，并返回一个被缓存的回调函数。与 `useMemoizedFn` 类似，这个缓存的回调函数会在每次渲染时保持不变，直到依赖项发生变化。当依赖项发生变化时，`useCallback` 会重新计算并返回一个新的缓存回调函数。

import { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // 处理点击事件
  }, []);

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

在使用 `useMemoizedFn` 和 `useCallback` 时，需要注意以下几点：

- 如果函数依赖的变量不在依赖项数组中，那么每次渲染时都会创建一个新的函数。因此，确保将所有函数依赖的变量都包含在依赖项数组中。
- 通常情况下，应该优先使用 `useCallback` 来缓存回调函数，因为大多数情况下我们更经常需要缓存回调函数而不是普通函数。
- 只有在性能优化的情况下才需要使用这两个 hook。在大多数情况下，React 会自动处理函数的性能优化，因此不需要手动使用这些 hook。

希望能解答你的问题！如果还有其他问题，请继续提问。