React Hooks：useMemo

1. 问题

在组件的生命周期中，React 会在组件更新时重新渲染组件。当 React 检查组件中的任何更改时，它可能会检测到由于 JavaScript 处理相等性和浅比较的方式而产生的意外或意外更改。React 应用程序中的这种更改将导致其不必要的重新渲染。

如果某个部分重新渲染，它就会重新渲染整个组件树。

2. 记忆化

记忆化或记忆化是一种优化技术，主要用于通过存储昂贵的函数调用的结果并在再次出现相同输入时返回缓存的结果来加速计算机程序。

如果我们有一个函数 compute  1 + 1，它将返回 2。但是如果它使用了记忆功能，下次我们 1通过该函数运行 时，它就不会将它们相加；它只会记住答案是， 2 而不会执行加法函数。

3.语法

从官方的 React 文档来看，语法如下；

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

useMemo 接受一个函数和一个依赖项数组。

当依赖项之一发生更改时，useMemo hook 将运行开销很大的操作。如果没有发生任何更改，它将返回存储的值。

4.示例

以下是 useMemo 实际应用的一个示例。

const memoizedList = useMemo(() => {
  return userList.map(user => {
    return {
      ...user,
      name: someExpensiveOperation(user.name)
    } 
  }) 
}, [userList])

5. 使用右勾拳

除了useMemo之外，还有useCallback和useEffect可用于类似情况

useCallback 钩子与 useMemo 类似，但它返回一个记忆函数而不是记忆值。

如果你没有提供依赖项数组，就无法进行记忆，并且每次渲染时都会计算一个新值。因此，你可以继续使用useEffect。

// useMemo - returns -> memoized value
const memoizedValue = useMemo(() => expensiveFunction(a,b), [a,b])

// useCallback - returns -> memoized function
const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  },
  [a, b]
);

链接

• Hooks API 参考 - React
• 理解 React useMemo Hook | DigitalOcean

结论

在本文中，我们了解了 React 提供的 useMemo hook。您还可以在下面查看其他 React hook。

我很乐意听到您的反馈。