React中useMemo与useEffect的核心差异是什么？

1. 执行时机完全不同 #

• useEffect 是在组件渲染完成后执行（属于 React 的副作用阶段），此时 DOM 已经更新完成，适合做 DOM 操作、数据请求、订阅这类不影响渲染的操作。
• useMemo 是在组件渲染过程中执行（属于 React 的渲染阶段），此时 DOM 还未更新，不能在这里做副作用操作（比如操作 DOM 会报错），它的执行是为了给当前渲染提供计算好的值。

2. 核心作用与返回值不同 #

• useEffect 专注处理副作用，没有实际的返回值（最多返回一个清理函数，用于在组件卸载或依赖变化前清理副作用，比如取消订阅）。
• useMemo 专注缓存昂贵计算的结果，它会返回函数执行后的结果。当依赖数组里的值不变时，直接返回缓存的结果，避免每次渲染都重复执行昂贵计算（比如复杂的数组过滤、数据转换）。

3. 依赖变化的影响不同 #

• 当 useEffect 的依赖变化时，React 会先完成组件的重新渲染，然后再执行 useEffect 里的副作用函数。
• 当 useMemo 的依赖变化时，React 会在当前渲染过程中重新执行计算函数，得到新的结果，这个结果会直接用于本次渲染的输出。

4. 对渲染的间接影响不同 #

• useMemo 返回的缓存值如果是引用类型（对象、数组），只要依赖不变，就会返回同一个引用，不会导致依赖这个值的子组件触发不必要的重新渲染（配合 React.memo 使用效果更明显）。
• useEffect 本身不会触发渲染，只有当它内部调用了状态更新函数（比如 setState）时，才会间接引发组件重新渲染。

内容的提问来源于stack exchange，提问作者Apabila X Terkadang