使用 useMemo 和 useCallback

在 React 中，我们经常需要优化组件的性能，以确保更好的用户体验。其中两个经常被用来优化性能的 hook 是 useMemo 和 useCallback。

useMemo

useMemo 是一个能够对值进行缓存，并在相同的依赖发生变化时返回缓存值的 hook。它接受两个参数：计算函数和依赖列表。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

在这个例子中，每当 a 或 b 改变时，computeExpensiveValue 函数都会被重新计算。如果我们不使用 useMemo，每次组件渲染时 computeExpensiveValue 都会被执行。

useMemo 对于对计算开销比较大（比如运算、IO 操作）的计算函数非常有用。如果不使用 useMemo 会导致组件的性能和响应速度下降。

useCallback

useCallback 与 useMemo 差不多，只不过它缓存的是函数本身。它的目的是避免由于函数的重新定义而对依赖进行更新。它接受两个参数：函数和依赖列表。

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

在这个例子中，每当 a 或 b 改变时，doSomething 函数都会被重新定义。如果我们不使用 useCallback，由于 doSomething 函数的重新定义，会导致子组件的不必要渲染。

useCallback 通常用于将回调传递给子组件，以避免对子组件的不必要渲染。

总结

使用 useMemo 和 useCallback 能够有效地减少组件的重复计算和渲染次数，从而提高性能和用户体验。

代码：

## useMemo

`useMemo` 是一个能够对值进行缓存，并在相同的依赖发生变化时返回缓存值的 hook。它接受两个参数：计算函数和依赖列表。

```jsx
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback

useCallback 与 useMemo 差不多，只不过它缓存的是函数本身。它的目的是避免由于函数的重新定义而对依赖进行更新。它接受两个参数：函数和依赖列表。

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);