React中的useMemo钩子

背景

在写一个页面的时候，有些参数全文几乎很多地方就要用到，如果把他放在useEffect中，每次变化都会调用，感觉挺浪费性能的。
为了避免这种情况，可以考虑将这个参数放在useMemo中进行缓存，以避免在每次组件渲染时重新计算。同时，将这个参数作为 useEffect 的依赖项，确保只有在参数变化时才执行副作用代码。

useMemo

useMemo 是 React 中的一个钩子函数，用于在函数组件中进行记忆化的计算。它可以用于优化性能，避免不必要的计算和重渲染。

参考

useMemo(()=>{}, [])

useMemo接收一个计算函数和一个依赖项数组作为参数。计算函数用于执行耗时的计算操作，并返回计算结果。依赖项数组表示 useMemo 钩子的依赖项，当这些依赖项发生变化时，useMemo 会重新计算计算函数的结果。否则，它将返回之前缓存的结果。

用法

• 跳过昂贵的重新计算
• 跳过组件的重新渲染
• 记住另一个Hook的依赖项
• 记忆一个函数

实例

const rowSelection = useMemo(() => {
    if (activeKey === 'onsale') {
      return false;
    }
    return {}
}, [activeKey]);
 useEffect(() => {
    ...
  }, [activeKey])

在这个例子中，使用了 useMemo 是为了缓存 rowSelection 变量的值，以避免在每次组件渲染时都重新计算。
useMemo 接受一个计算函数和一个依赖项数组作为参数。在这里，计算函数的逻辑如下：

• 如果 activeKey 的值等于 'onsale'，则返回 false。
• 否则，返回一个空对象 {}。
  依赖项数组 [activeKey] 指定了 useMemo 钩子的依赖项，当 activeKey 的值发生变化时，useMemo 会重新计算计算函数的结果。如果 activeKey 的值不变，则 useMemo 将返回之前缓存的结果。
  通过使用 useMemo，当 activeKey 的值发生变化时，rowSelection 的值会重新计算。如果 activeKey 的值是 'onsale'，则 rowSelection 的值为 false，否则为一个空对象 {}。这样可以确保 rowSelection 变量在 activeKey 发生变化时得到正确的值，而在其他情况下可以使用缓存的结果，避免不必要的计算和重渲染。

注意：

useMemo 并不是用于所有情况的解决方案。在大多数情况下，React 的自身渲染优化机制会自动处理组件的渲染，并在需要时进行优化。只有在必要时，才使用 useMemo 进行显式的记忆化计算。