主要用来性能优化

useMemo

缓存每次重新渲染都需要计算的结果

const cachedValue = useMemo(calculateValue, dependencies)

calculateValue：要缓存计算值的函数。它应该是一个没有任何参数的纯函数，并且可以返回任意类型。
dependencies：所有在 calculateValue 函数中使用的响应式变量组成的数组。响应式变量包括 props、state 和所有你直接在组件中定义的变量和函数。

const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  )

useMemo 不会让第一次渲染变快。它只是跳过不必要的更新

使用场景：

缓存昂贵计算
缓存对象

useCallback

在多次渲染中缓存函数

const cachedFn = useCallback(fn, dependencies)

fn：想要缓存的函数。
dependencies：有关是否更新 fn 的所有响应式值的一个列表。

const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer])

使用场景：

函数作为其他 hook 的依赖项
事件处理函数

缺点

每个 useMemo/useCallback 都需要额外内存来存储缓存
初始渲染性能下降，渲染时需要做额外的工作
代码复杂度增加
依赖数组容易忘记导致拿到过期的旧数据