React中useMemo、React.memo与React.PureComponent的区别及选型

这三个API虽然都属于React的性能优化能力，核心目标都是减少不必要的重渲染/重复计算，但适用场景、作用维度完全不同，绝对不能仅按发布时间早晚优先选择useMemo，具体区别和选择逻辑如下：

三者核心区别 #

React.PureComponent #

它是类组件时代的官方基类，本质是默认给类组件内置了浅比较逻辑的shouldComponentUpdate生命周期，会自动对组件的props和state做浅对比，只有前后值浅不相等时才会触发组件重渲染。

• 仅适用于类组件
• 仅支持默认浅比较，无法自定义对比逻辑，特殊场景需要自己重写shouldComponentUpdate
• 如果props/state是引用类型，仅修改内部属性不会触发重渲染，需要返回全新的引用值才会被检测到变化

memo(MyComponent) #

它是针对函数组件设计的高阶组件（HOC），可以理解为函数组件版本的PureComponent，默认同样会对传入组件的props做浅比较，只有props变化时才会触发被包裹的函数组件重渲染。

• 仅适用于函数组件
• 支持传入第二个参数作为自定义比较函数，可灵活控制props的对比逻辑，比PureComponent适配性更强
• 仅能阻止props变化导致的重渲染，如果组件内部依赖useState、useContext等内部/上下文状态，状态变化时依然会正常重渲染

useMemo #

它是React Hooks体系下的钩子函数，作用是缓存单次计算的返回值，和前两个控制组件是否渲染的逻辑完全不同：你需要传入计算函数和依赖项数组，仅当依赖项发生变化时才会重新执行计算函数返回新值，否则直接返回上一次缓存的结果。

• 仅能在函数组件或自定义Hook内部调用
• 作用维度是「值级别」而非「组件级别」，核心是避免高成本计算逻辑在每次渲染时重复执行
• 常和memo配合使用：给子组件传递引用类型的props时，用useMemo缓存引用，可以避免子组件因为props引用变化被误触发重渲染

作用是否完全相同？ #

三者作用完全不同：

• React.PureComponent和memo属于组件级的渲染控制能力，作用是判断整个组件是否需要跳过重渲染
• useMemo属于值级别的缓存能力，作用是缓存单个计算结果，不控制整个组件的渲染逻辑
  三者只是最终目标都是优化性能，但适用的场景没有重叠。

开发中如何选择？ #

可以按照开发场景直接对应选择：

• 如果你正在编写类组件，需要减少不必要的重渲染，直接选择React.PureComponent即可，不用手动实现浅比较逻辑；如果有特殊对比需求，自行重写shouldComponentUpdate生命周期
• 如果你正在编写函数组件，想要避免子组件因为父组件无关状态更新被连带重渲染，给子组件外层包memo()即可，默认浅比较不满足需求时可以传入第二个自定义比较函数
• 如果你组件内部有单次执行成本很高的计算逻辑（比如遍历数千条数据做筛选、格式化），或者需要给memo包裹的子组件传递对象/函数类型的props，再使用useMemo（缓存函数用语法糖useCallback即可）做值缓存，避免重复计算或子组件误重渲

是否可以仅依据API发布的新旧程度优先选择useMemo？ #

绝对不可以，三个API的适用场景完全不重叠，乱用反而会带来负收益：

• 比如用useMemo缓存整个组件的返回值来模拟memo的效果，不仅可读性差，也不符合官方推荐的写法，维护成本极高
• 不需要缓存的低开销计算也加useMemo，反而会多出来依赖项对比、值缓存的额外开销，性能反而不如不加
  所有memo相关的优化都建议先确认有可观测的性能问题再针对性添加，不要上来就全局加优化，反而增加不必要的维护成本。

内容的提问来源于stack exchange，提问作者Fay Chen