React渲染prop计算值时用useMemo有用吗？两种写法有什么差异？

两种实现模式的核心区别 #

• 第一种无useMemo的实现：组件每次触发重渲染时，无论myObject.value是否发生变化，都会重新执行changeMyValueWithSomeCalculus计算逻辑得到新的computedValue。
• 第二种用useMemo的实现：组件重渲染时会先比对依赖项myObject.value是否和上一次渲染时的值相等，只有依赖发生变化时才会重新执行计算逻辑，否则直接返回上一次缓存的计算结果，跳过重复计算。

useMemo的实际价值 #

useMemo不是万能优化手段，有没有价值要分场景判断：

1. 无价值甚至负优化的场景：如果changeMyValueWithSomeCalculus是非常轻量的计算（比如基础数值运算、简单字符串拼接等），useMemo的缓存维护、依赖比对的额外开销反而会大于重复执行计算的开销，这种场景完全没必要用。
2. 价值很高的场景：
   • 计算逻辑非常耗时：比如大数组遍历排序、复杂正则匹配、大规模数据转换等场景，useMemo可以避免不必要的重复计算，减少主线程阻塞，降低渲染卡顿概率。
   • 计算结果为引用类型（对象、数组、函数等），且需要作为其他Hook的依赖、或者传递给被React.memo包裹的子组件：此时useMemo可以稳定值的引用，避免依赖变动触发的不必要的Hook重执行、子组件重渲染。

组件重渲染次数的变化 #

useMemo不会改变当前组件本身的重渲染次数：当前组件是否重渲染只由props、state、context的变化决定，和是否使用useMemo没有关系，useMemo只是优化了单次渲染过程中的计算开销。
只有当useMemo缓存的引用类型值被传递给子组件，且子组件被React.memo包裹时，才会减少子组件的重渲染次数。

选择建议 #

• 优先写无useMemo的简单实现，代码更易读，也没有额外开销，适合绝大多数轻量计算场景。
• 只有在遇到明显的计算性能瓶颈、或者需要稳定引用避免子组件多余渲染时，再针对性加useMemo做优化。
• 不要无脑给所有计算都加useMemo，大部分场景下属于过度优化，反而得不偿失。

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