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