如何使用反应备忘录挂钩 - JavaScript

React Hooks是React 16.8中提供的新功能，可让您使用类组件之外的状态和其他React功能。其中一个重要的挂钩是useState。另一个同样有用的挂钩是useEffect，可以让我们在挂钩中处理副作用。

备忘录是一个React挂钩，用于将结果保存起来，以便在需要时进行检索。本教程将向您展示如何使用React的useMemo挂钩并介绍一些使用备忘录的最佳实践。

什么是备忘录？

备忘录是一种优化技术，它会将计算结果缓存起来，以便在未来的渲染周期中使用。对于耗时的计算和重复的计算而言，备忘录可以提高性能。

在React中，备忘录可以由两个挂钩来处理：useMemo和useCallback。useMemo挂钩可以缓存具有记忆性的计算结果，而useCallback挂钩可以缓存具有记忆性的回调函数。

以下示例演示如何使用useMemo挂钩：

import React, { useState, useMemo } from 'react';

function App() {
  const [count, setCount] = useState(0);

  // 备忘录通过useMemo定义，仅在count输入值变化时更新此函数
  const expensiveFunction = useMemo(() => {
    console.log('Executed Memoized Function')
    let sum = 0;
    for (let i = 0; i < count; i++) {
      sum += i;
    }
    return sum;
  }, [count]);

  return (
    <div>
      <h1>Memoization Example:</h1>
      <p>Count: {count}</p>
      <p>Expensive Function Result: {expensiveFunction}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
    </div>
  );
}

export default App;

在这个例子中，我们定义了一个“昂贵的函数”，它将从1到计数之间的整数相加。但是，该函数很重，并且对于相同的计数值来说，我们会得到相同的结果。因此，我们可以使用useMemo挂钩将结果缓存起来，以避免在组件重新渲染时重复计算。

我们在第二个参数中传入了[count]，这意味着只有当count值更改时才会重新计算该函数。当我们执行示例时，该函数只有在count值更改时才会被调用。

最佳实践

• 将useMemo和useCallback用于涉及昂贵计算和回调的组件。这将提高性能并减少组件重新渲染的次数。
• 仅在需要时才使用备忘录。如果一个函数很快，那么请不要将其缓存，因为缓存本身需要时间。您应该只在需要时使用它。
• 对于复杂的对象，您应该使用更高级别的库，例如Redux或mobx。用于轻量级状态管理的useReducer也是一个很好的选择。
• 在代码中使用注释详细说明为什么使用备忘录。

现在您已经了解了React中使用memoization的基础知识，现在可以将其应用于自己的项目中并开始提高性能啦！