useMemo和useCallback的主要区别

useMemo缓存计算结果，useCallback缓存函数引用

主要区别

两者的核心区别在于用途和返回值：

用途

useMemo： 避免每次渲染重复‌计算复杂数据‌，适用于缓存计算结果（如过滤列表、数学运算等）。

useCallback： 避免每次渲染‌重建函数引用‌，适用于稳定函数传递（如事件处理器传给子组件）。

返回值

useMemo： 返回‌计算结果的缓存值‌，依赖项变化时才重新计算。

useCallback： 返回‌函数的缓存引用‌，依赖项变化时才重建函数。

设计意图

React分开设计两者，提升代码语义清晰度（开发者更易区分用途），并减少误用风险（如用useMemo缓存函数需额外写法，而useCallback更简洁安全）。

应用场景示例

useMemo适用场景：

复杂计算： 例如过滤大型列表后渲染结果，依赖原列表和过滤条件。

避免重复生成昂贵对象： 例如配置对象依赖多个状态时缓存。

useCallback适用场景：

传递稳定回调： 例如将点击事件处理函数传给被React.memo优化的子组件，避免子组件因函数引用变化而无效重渲染。

作为依赖项： 当函数被用在useEffect或其他Hook的依赖数组中，保持引用稳定避免触发多余副作用。

‌注意：‌ 两者都需明确依赖项，滥用可能导致性能下降。应在必要时使用，而非所有计算或函数都缓存。