useMemo和useCallBack的区别和使用场景

`useMemo` 和 `useCallback` 都是 React 中用来优化性能的 Hook。

`useMemo` 用于对计算结果进行缓存，避免重复计算。它接受两个参数：计算函数和依赖项数组。当依赖项数组中的任意一个元素发生变化时，`useMemo` 会重新计算结果并返回。如果依赖项没有发生变化，则 `useMemo` 直接返回上次的计算结果。

`useMemo` 的使用场景：

- 计算某个耗时的、不经常改变的值，比如对一个长列表进行筛选、排序等操作时，可以使用 `useMemo` 对计算结果进行缓存。
- 避免不必要的渲染，比如在父组件传递一个函数给子组件时，可以使用 `useMemo` 缓存这个函数，避免因为父组件重新渲染导致子组件也重新渲染。

`useCallback` 用于缓存一个函数，避免函数的重复创建。它接受两个参数：回调函数和依赖项数组。当依赖项数组中的任意一个元素发生变化时，`useCallback` 会返回一个新的函数。如果依赖项没有发生变化，则 `useCallback` 直接返回上次缓存的函数。

`useCallback` 的使用场景：

- 向子组件传递一个回调函数时，可以使用 `useCallback` 缓存这个函数，避免因为父组件重新渲染导致子组件也重新渲染。
- 当一个组件的某个函数依赖于其他状态或属性时，可以使用 `useCallback` 缓存这个函数，避免因为状态或属性的变化导致函数的重复创建。

需要注意的是，`useMemo` 和 `useCallback` 都是用来优化性能的，但是在大部分情况下并不是必需的。只有在组件的性能出现瓶颈时，才需要考虑使用这两个 Hook 进行优化。