请简述useCallback 和 useMemo 的使用场景 ？
参考回答
useCallback 和 useMemo 都是 React 中的性能优化 Hook，它们可以帮助我们避免不必要的重新渲染和计算。它们的使用场景如下：
- useCallback：用于缓存函数，避免因组件重渲染而导致函数重新创建，特别是在将函数作为 props 传递给子组件时。
- useMemo：用于缓存计算结果，避免在每次渲染时重新计算，特别是当计算过程较为昂贵时。
详细讲解与拓展
1. useCallback：
useCallback 是一个 Hook，它会返回一个缓存的版本的函数，只在其依赖项变化时才会重新创建该函数。它的主要作用是优化性能，防止因为组件重新渲染而导致不必要的函数重新创建。
使用场景：
– 当你把一个回调函数作为 prop 传递给子组件时，如果父组件重新渲染，子组件也会因为 prop 的变化而重新渲染。useCallback 可以用来缓存这个回调函数，避免不必要的重新渲染。
举个例子：
假设有一个父组件，它通过 props 将一个回调函数传递给子组件。每次父组件重新渲染时，回调函数都会被重新创建，导致子组件也重新渲染。使用 useCallback 可以缓存这个回调函数。
const ParentComponent = () => {
const [count, setCount] = useState(0);
// 使用 useCallback 缓存函数
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
return <ChildComponent onClick={handleClick} />;
};
const ChildComponent = React.memo(({ onClick }) => {
console.log('Child rendered');
return <button onClick={onClick}>Increment</button>;
});
在上面的例子中，handleClick 函数只有在 count 改变时才会重新创建，这样就避免了 ParentComponent 重新渲染时，handleClick 重新创建，从而避免了 ChildComponent 不必要的重新渲染。
2. useMemo：
useMemo 是一个 Hook，它返回一个缓存的计算结果。它只会在依赖项发生变化时重新计算值，避免了每次组件渲染时都进行昂贵的计算。
使用场景：
– 当你的计算非常昂贵，并且这些计算的结果依赖于某些输入值时，可以使用 useMemo 来缓存计算结果，避免重复计算。
举个例子：
假设你有一个需要进行大量计算的函数，并且计算结果依赖于某些 props 或 state 值。使用 useMemo 可以缓存计算结果，在依赖项不变化时，避免重复计算。
const ExpensiveComponent = ({ num }) => {
// 使用 useMemo 缓存计算结果
const computedValue = useMemo(() => {
console.log('Recalculating...');
return num * 2; // 假设这是一个昂贵的计算
}, [num]); // 只有 num 变化时才重新计算
return <div>{computedValue}</div>;
};
在上面的例子中，computedValue 只会在 num 改变时重新计算，避免了每次组件重新渲染时都进行重复的计算。
总结：
– useCallback 用于缓存函数，避免因为组件重渲染导致函数重新创建，常用于函数作为 props 传递给子组件的场景。
– useMemo 用于缓存计算结果，避免重复计算，常用于计算过程较为复杂或者昂贵的场景。
这两个 Hook 都是性能优化工具，能够有效地减少不必要的计算和渲染，从而提升应用的性能，特别是在大型应用中效果显著。