memo 的作用
在 React 的渲染流程中，一般来说，父组件的某个状态发生改变，那么父组件会重新渲染，父组件所使用的所有子组件，都会强制渲染。而在某些场景中，子组件并没有使用父组件传入的没有发生更改的状态时，子组件重新渲染是没有必要的。因此有了 React.memo
未使用memo影响案例：
上图中，父组件中的两个状态 number、flag 都和 Child 组件没有关系，但是当点击按钮时，flag 发生改变，此时父组件重新渲染，按钮文案变为显示，控制台却打印出 "子组件又渲染" 的信息，说明子组件也跟着重新渲染了。而这肯定是不合理的，在子组件不涉及变动参数或者变量时，我们不希望子组件刷新，此时我们可以给子组件加上 React.memo
子组件被 memo 包裹时，如果组件的 props 不发生改变时，子组件不会重新渲染。
由于memo 对于新旧 props 的比较是浅比较，当一个引用类型的 props 改变时，只要它的地址没有发生改变，那么就算 props 中某一项数据发生了改变，那么被 memo 包裹的组件是不会重新渲染的。
点击父组件按钮改变了 list，但子组件渲染的只有初始的 1 2 3，并没有重新渲染；因为虽然 list 内容改变了，但是 list 是引用类型的数据，memo 对新旧 list 进行浅比较，发现地址没变，就不重新渲染；所以我们不能使用list.push()进行修改引用类型数据，应该直接重新赋值，下图：
虽然 memo 可以对组件进行性能优化，但是我们也不能所有组件都使用memo，因为缓存本身也是需要开销的。如果每一个组件都用 memo ，对浏览器的开销就会很大，本末倒置了。所以我们应该选择性的用 memo 包裹组件，而不是滥用。
useMemo 的作用
useMemo 它可以缓存一个结果，只有当依赖内容发生改变的时候，会重新执行计算并返回最新的结果，否则就使用缓存的结果
在上面的代码中，当我们点击了按钮后，会更改状态 num，导致组件重新渲染，这个时候即使computeResult没有任何依赖项有变化，也会因为组件重新渲染又会重新执行一遍，又进行依次大量的计算，这样就会增加性能开销，所以此时就需要使用useMemo
和memo一样，useMemo 并不是用的越多越好，因为缓存本身也需要开销；
useCallback 的作用
useCallback 类似于 useMemo，不过 useCallback 用于缓存函数，同样可以防止无关的刷新
上图中，点击按钮更改父组件的 num 状态后，父组件重新渲染，但此时控制台打印 "传入子组件的函数" 这一信息，说明子组件也重新渲染了，但是传入子组件的 add 方法和 num 这个状态没有任何关系，我们并不希望它做无关的渲染，因此可以使用 useCallback 对函数进行缓存对组件进行性能优化，如下图红色框框内容
虽然我们使用了 useCallback 对 add 进行了缓存，且依赖项是不会改变的 age，但是当点击按钮更改 num 后，此时子组件依旧会重新渲染了，所以控制台同样会打印出信息；因此黄色框框子组件结合memo使用，才是最佳方案
总结:
memo：
父组件重新渲染，没有被 memo 包裹的子组件也会重新渲染；被 memo 包裹的组件只有在 props 改变后，才会重新渲染；而memo 只会对新旧 props 做浅比较，所以对于引用类型的数据如果发生了更改，需要返回一个新的地址
memo 并不是用的越多越好，因为缓存本身也是需要开销的。如果每一个组件都用 memo 去包裹一下，那么对浏览器的开销就会很大，所以项目中可以针对刷新频率高的组件，根据实际情况，使用 memo 进行优化
useMemo：
useMemo 是对计算的结果进行缓存，当缓存结果不变时，会使用缓存结果；
useMemo 并不是用的越多越好，对于耗时长、性能开销大的地方，可以使用 useMemo 来优化，但大多数情况下，计算结果的开销还没有使用 useMemo 的开销大，应视情况而定
useCallback：
useCallback 与 useMemo 类似，只不过是对函数进行缓存
useCallback 可以单独使用，但是单独使用的使用对性能优化并没有实质的提升，且父组件此时重新渲染，子组件同样会渲染；因此配合 memo 一起使用，这样当父组件重新渲染时，缓存的函数的地址不会发生改变，memo 浅比较会认为 props 没有改变，因此子组件不会重新渲染
注意:
开发时你可能会看到即使添加了useMemo缓存，也会执行两次，如下
原因在于react帮助我们再开发过程中尽早发现组件中常见的错误，但是打包线上环境则不会有问题；开发环境严格模式下将有出现此类问题：
组件将 额外重新渲染一次 以查找由于非纯渲染而引起的错误。
组件将 额外重新运行一次 Effect 以查找由于缺少 Effect 清理而引起的错误。
组件将 额外重新运行一次 refs 回调 以查找由于缺少 ref 清理函数而引起的错误。
组件将被 检查是否使用了已弃用的 API。
以上问题仅限于开发环境严格模式启用；仅仅是react协助我们排查问题；如果我们在开发环境不想有该问题，则可以严格模式：
1、全局检查是否使用<StrictMode>包裹
2、检查next.config.ts中设置reactStrictMode: false（如下图）
