useMemo 和 useCallback 是 React 的两个 Hook，用于优化性能，通过避免不必要的重新计算和渲染。这两个 Hook 看起来很相似，但它们的使用场景和作用是不同的。下面详细解释这两个 Hook 的区别和作用。

useMemo

作用

useMemo 用于缓存计算结果，避免在每次渲染时都重新计算复杂的值。它返回一个记忆化（缓存的）值，只有当其依赖项发生变化时，才会重新计算该值

使用场景

• 复杂计算：当你有一个开销很大的计算（例如数据处理、复杂数学运算）且依赖项不常变化时，使用 useMemo 可以避免在每次渲染时都进行这些计算。
• 性能优化：减少不必要的计算，提升组件性能，尤其是在处理大量数据或复杂逻辑时。

示例

import React, { useMemo, useState } from 'react'; 
const ExpensiveComponent = ({ number }) => { 
    const computeExpensiveValue = (num) => { 
        // 假设这是一个开销很大的计算 
        console.log('Computing...');
        return num * 2; 
    }; 
    const result = useMemo(() => computeExpensiveValue(number), [number]); 
    return <div>Result: {result}</div>; 
};

• computeExpensiveValue(number) : 计算复杂值的函数。
• [number] 依赖项数组，只有当这些依赖项中的值发生变化时，useMemo 才会重新计算

useCallback

作用

useCallback 用于缓存函数实例，避免在每次渲染时都创建新的函数实例。它返回一个记忆化（缓存的）回调函数，只有当其依赖项发生变化时，才会返回一个新的函数实例。

使用场景

当你有一个函数作为 prop 传递给子组件，且这个函数可能导致子组件不必要的重新渲染时，使用 useCallback 可以帮助保持函数引用的稳定性

示例

import React, { useCallback, useState } from 'react'; 
const ExpensiveComponent = ({ dependency }) => { 
const memoizedCallback = useCallback(() => { // 你的回调函数逻辑 }, [dependency]);
}

• 第一个参数是一个函数。

• 第二个参数是一个依赖项数组，只有当数组中的依赖项发生变化时，useCallback 才会重新创建函数。

总结

• useMemo：用于记忆化计算结果，避免重复计算。
• useCallback：用于记忆化函数，避免函数在每次渲染时重新创建。