前端/移动开发面试题更新 2026-08-05

请分别说明 React.memo() 与 useMemo() 的用途及二者之间的核心区别,包括适用场景与注意点。

前端/移动开发性能优化技术原理React

考察说明

考查对 React 性能优化相关 API 的理解,以及是否清楚 memo 与 useMemo 的不同定位。

回答思路

  1. 【回答框架 1】React.memo 是用于函数组件的高阶组件,通过浅比较 props 来决定是否重新渲染组件,适用于纯展示组件,避免父组件更新导致子组件不必要的渲染。
  2. 【回答框架 2】useMemo 是 React Hook,用于缓存计算结果,它接收一个函数和依赖数组,只有依赖项变化时才重新执行函数,适用于开销较大的计算或引用类型数据的稳定。
  3. 【回答框架 3】二者的核心区别:React.memo 针对整个组件,优化的是渲染阶段;useMemo 针对函数内部的计算,优化的是计算阶段。React.memo 只能包裹组件,useMemo 只能在函数组件或自定义 Hook 中调用。
  4. 【回答框架 4】使用注意点:useMemo 不能保证缓存不失效,React 可能丢弃缓存,因此不能用于必须稳定的逻辑;React.memo 默认浅比较,复杂 props 需要自定义比较函数。性能优化应以实际测量为准,不可滥用,否则可能因比较开销而得不偿失。
  5. 【关键点 1】React.memo 是高级组件,浅比较 props,仅影响组件重新渲染。
  6. 【关键点 2】useMemo 是 Hook,缓存函数计算结果,依赖项不变则不重算。
  7. 【关键点 3】React.memo 处理组件级优化,useMemo 处理计算级优化。
  8. 【关键点 4】useMemo 缓存可能被 React 丢弃,不应用作语义保证。
  9. 【关键点 5】React.memo 浅比较 props 复杂结构需自定义比较函数。
  10. 【易错点 1】误以为 useMemo 能保证永远不重新计算,实际上缓存可能被丢弃。
  11. 【易错点 2】将 useMemo 用于所有值,或 React.memo 用于所有组件,忽略实际开销。
  12. 【易错点 3】React.memo 只浅比较 props,不能自动深比较,复杂对象需自定义比较函数。