useMemo和useCallback是React中的两个钩子函数，用于在组件渲染过程中优化性能。
- 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将会返回上一次缓存的结果。
- 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可以避免不必要的重复计算和函数创建，提高组件的性能。但是过度使用也会带来额外的开销，需要根据具体情况进行权衡。