useCallback 和 useMemo 使用场景

一切为了性能，无论是 useCallback 还是 useMemo 还是 memo，都是为了让不该渲染的组件不去渲染

在学习 useCallback、useMemo 之前，我们需要知道一点，React 的渲染是自顶而下，如果父组件渲染了，那么子组件也会渲染，其子孙组件“世世代代”都要渲染

但如果父组件的渲染与子组件的 props 无关呢？设想一下父组件改变样式颜色，关我子组件的数据请求什么关系？

而这正是 useCallback 、useMemo、memo 的作用所在，将子组件用 memo 包住，如果 props 和上次渲染时相同，那么子组件就跳过了重新渲染，useCallback 缓存父组件传给子组件的函数，useMemo 缓存父组件传给子组件的（计算）值

如今 React19 提出 Compiler，不需要再写 useCallback 、useMemo、memo 扰乱心智了

在讲 useMemo 是什么之前，我们先了解下什么是 Memo

Memo​

官方定义：React.memo 是一个高阶组件（HOC），其主要目的是优化函数组件的性能。它通过记忆组件的渲染输出，使得当组件的 props 没有变化时，可以跳过该组件的重新渲染，从而提升性能

它会进行浅层对比，即对比两个对象或数组时只检查其第一层属性的相等性方法，在此比较中，仅比较对象的直接属性值，而不递归地深入到镶嵌的对象或数组中

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = obj1;

console.log(obj1 === obj2); // false，因为 obj1 和 obj2 指向不同的内存地址
console.log(obj1 === obj3); // true，因为 obj3 引用同一个 obj1

和浅拷贝一个道理，只考察第一层属性，不递归更深层的对象和数组

举个栗子