• useMemo、useCallback用途
• 常见误区
• 正确的使用场景

React之渲染优化

React 的 useMemo 和 useCallback 这两个 Hook 主要用于记忆化（memoization），即在组件重新渲染时缓存某个值或函数，避免重复创建。但是在大多数情况下我们其实不需要它们，甚至过度使用会让应用变慢、代码更复杂。

useMemo、useCallback用途

TIP

useMemo：缓存计算结果或对象，防止在每次渲染时被重新创建。 useCallback：缓存函数引用，防止在依赖不变的情况下生成新函数。

以上两个方法只在重新渲染阶段有用，在初次渲染时反而会拖慢性能

常见误区

TIP

• 1、为所有props加上useMemo/useCallback
  • 没有必要，除非该子组件被React.memo包裹，否则不会阻止重渲染。
• 2、认为props记忆化就能防止重复渲染；
  • 实际上，只要父组件重新渲染，子组件仍会跟着渲染，除非用React.memo
• 3、误认为所有计算都昂贵；
  • 普通操作（数组排序、对象创建）通常只需要几毫秒，不值得记忆化。除非你真的在计算大数的阶乘，否则不要对所有纯 JavaScript 操作使用 useMemo

正确的使用场景

TIP

仅在以下情况下使用

• 子组件被React.memo包裹，且传入的props都稳定不变：
• 某段计算确实非常昂贵（如大数据处理，复杂数学计算）;
• 需要维持函数、对象引用稳定性，避免触发无意义的依赖更新;

对“原生” JavaScript 操作（即纯计算、对象/数组创建、过滤/排序等）不要包裹 useMemo —— 与其浪费时间在它上面，不如专注于子组件更新；它们才是你的真正瓶颈。