了解useMemo和useCallback Hook的性能优化作用

# 引言
## 2. 什么是React Hook

React Hook是React 16.8版本引入的新特性，它可以让函数组件具有类组件的功能。在使用Hook之前，函数组件的状态管理和副作用逻辑都是通过类组件的生命周期方法来实现的。但是随着项目规模的增大，生命周期方法变得冗长且难以维护。

React Hook的出现解决了这个问题，它使得我们可以在函数组件中使用状态(state)、生命周期方法和其他React特性，从而使代码更加简洁和易于理解。

在React Hook中，有两个常用的Hook: useMemo和useCallback。它们都用于性能优化，可以避免不必要的计算和重复渲染，并且在某些场景下可以提高应用的响应速度。

接下来的章节中，我们将深入了解和比较这两个Hook的使用方法、作用和区别。
### 3. 深入了解useMemo Hook

在前面的章节中，我们介绍了React Hook的基本概念和使用方法。而在本章节中，我们将深入探讨React Hook中的一个重要概念——useMemo Hook。

#### 3.1 useMemo的基本用法

useMemo是React Hook中的一个函数，它的作用是用于对计算结果进行缓存。当某个计算量较大的函数在多次渲染中始终返回相同的结果时，我们可以使用useMemo将其结果缓存起来，以避免重复计算，从而提高性能。

useMemo的基本语法如下：

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

其中，computeExpensiveValue是一个计算函数，a和b是它的两个参数。当a或b发生变化时，useMemo会重新执行computeExpensiveValue，并返回新的计算结果。否则，它会直接返回先前缓存的结果memoizedValue。

#### 3.2 useMemo的性能优化作用

在使用React进行开发时，有时会遇到需要进行复杂的计算的情况，这些计算可能会占据宝贵的渲染时间。如果没有缓存计算结果，每次重新渲染组件都会重新计算一次，这样会导致性能下降。

而使用useMemo可以避免这种情况发生，它能够通过缓存计算结果来提高渲染性能。当依赖项不发生变化时，useMemo会直接返回先前缓存的结果，避免重复计算。只有当依赖项发生变化时，它才会重新计算并更新结果。

#### 3.3 如何正确使用useMemo

在使用useMemo时，需要注意以下几点：

- 只有当计算量较大且需