useMemo与useRef存储相同值时哪个性能开销更高？差异可忽略吗？

• 性能开销对比：useMemo(() => "React", []) 的性能开销比 useRef("React") 更高。

  • 原因：useRef 本质是创建并返回一个可变的 ref 对象，初始化后每次渲染直接复用这个对象，几乎没有额外逻辑；而 useMemo 每次渲染都要执行依赖数组的检查（哪怕是空数组），第一次渲染还需要调用传入的回调函数生成值并缓存，后续渲染虽跳过回调执行，但依赖检查的步骤仍会存在，同时还多了一层函数创建的开销。

• 差异是否可忽略：在绝大多数日常开发场景下，这个性能差异完全可以忽略不计。两者的开销都属于 React 内部的极小量级操作，只有在极端场景（比如组件每秒高频渲染数百次、或在成百上千个组件中重复使用这类写法）才可能产生可感知的差别。

实际开发中，更应该优先考虑语义匹配：如果只是单纯存储一个不需要计算的静态值，直接把值定义在组件外部（模块级变量）是最优选择；如果必须在组件内部存储，useRef 比 useMemo 更贴合“存储可变容器/静态值”的语义——毕竟 useMemo 的设计初衷是缓存昂贵计算的结果，用它存静态值属于语义上的误用。

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