React Hook：useEffect与useMemo的区别及useMemo的实际优势探讨

嘿，这个问题问得特别关键——不少刚上手React Hooks的开发者都会对这两种写法的边界感到困惑。咱们一步步拆解分析：

一、两种写法功能并不完全一致 #

表面上看，最终页面都会显示readMessageFromDisk()的结果，但两者的执行时机、渲染流程有本质区别：

• useMemo版本：readMessageFromDisk()是在组件渲染过程中同步执行的。组件第一次渲染时，直接计算出message的值，然后一次性渲染出完整的<p>{message}</p>，整个过程只有1次渲染。
• useState+useEffect版本：第一次渲染时message是空字符串，组件先渲染出空的<p></p>；等到渲染完成（浏览器绘制后），useEffect才异步执行readMessageFromDisk()并调用setMessage，触发第二次渲染才显示真正的内容，总共会有2次渲染。

如果readMessageFromDisk()是个耗时的同步操作，差异会更明显：useMemo会阻塞渲染（直到计算完成），而useEffect版本会先展示空白内容，等计算完成后再更新。要是这个操作是异步的（比如返回Promise），useMemo会直接把Promise对象渲染成[object Promise]，而useEffect可以在then回调里正确设置结果。

二、useMemo的核心优势是什么？ #

useMemo绝对不是useState+useEffect的简写，它的设计目标是优化渲染性能，缓存昂贵计算结果，和useEffect的副作用处理定位完全不同。具体优势体现在这几点：

• 同步获取结果，避免额外渲染：如果渲染必须依赖计算结果，useMemo能在当前渲染周期内直接拿到值，不需要先渲染默认值再触发更新，减少不必要的重渲染次数。
• 缓存昂贵计算：当依赖项没有变化时，组件重新渲染会直接复用之前缓存的计算结果，而不是重复执行耗时的计算逻辑。比如你有一个需要遍历百万条数据的计算，只要依赖项不变，useMemo就能避免每次渲染都重复遍历。
• 保持引用稳定：对于数组、对象这类引用类型，useMemo能保证依赖项不变时，引用地址始终一致。配合React.memo使用时，可以避免子组件因为父组件传递的 props 引用变化而触发不必要的重渲染。

而useEffect的核心作用是处理副作用：比如发起网络请求、操作DOM、订阅事件等，这些操作不应该阻塞渲染，所以它会在渲染完成后异步执行。

总结 #

回到你的代码示例，虽然最终显示结果相似，但两者的执行逻辑和适用场景完全不同：

• 如果你需要在渲染时同步获取计算结果，并且想避免重复计算，选useMemo；
• 如果你需要处理渲染完成后的副作用操作，选useEffect。

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