useMemo和useCallback

useMemo和useCallback是React中的两个钩子函数，用于在组件渲染过程中优化性能。

1. useMemo: useMemo用于缓存计算结果，只有在依赖项改变时才会重新计算。它接收两个参数：一个函数和一个依赖数组。函数返回一个值，该值将被缓存起来，并在下次组件渲染时返回。如果依赖数组的值发生变化，useMemo将会重新计算值，否则直接返回缓存的值。

Copy

import { useMemo } from 'react';

function MyComponent({ a, b }) {
  const result = useMemo(() => {
    // 进行一些复杂的计算
    return a + b;
  }, [a, b]);

  return <div>{result}</div>;
}

上面的例子中，只有当a或b的值发生变化时，result才会重新计算。如果两者都保持不变，useMemo将会返回上一次缓存的结果。

2. useCallback: useCallback用于返回一个记忆化函数，该函数会在依赖项改变时返回一个新的函数引用。它也接收两个参数：一个函数和一个依赖数组。每当依赖数组的值发生变化时，useCallback将返回一个新的函数引用。

Copy

import { useCallback } from 'react';

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    // 一些处理逻辑
    onClick();
  }, [onClick]);

  return <button onClick={handleClick}>Click Me</button>;
}

上面的例子中，只有当onClick的值发生变化时，handleClick才会返回一个新的函数引用。如果onClick保持不变，useCallback将会返回上一次缓存的函数引用，避免了不必要的函数创建。

使用useMemo和useCallback可以避免不必要的重复计算和函数创建，提高组件的性能。但是过度使用也会带来额外的开销，需要根据具体情况进行权衡。