了解 useMemo 钩子
了解 useMemo 钩子
从 React 16.8 开始。我们被介绍给一个新的工具，叫做 挂钩 这让我们可以在不使用类的情况下在基于函数的组件中使用状态和其他 React 特性。在本文中，我们将关注一个未充分利用的反应钩子，即 使用备忘录。
使用备忘录 钩子接受一个函数和一个依赖列表并返回 记忆值 由传递的函数返回。它仅在其依赖项之一发生更改时才重新计算该值。当返回值不会改变时，避免在每次渲染上进行昂贵的计算很有用。
句法：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
让我们通过一些例子来理解 useMemo 钩子
示例 1：
问题 ：
上面我们可以看到useEffect运行并记录 你好呀 我点击 + 按钮即使依赖 计算 在我们的例子中，值是相同的，即 [1, 2, 3]。这是由于称为参照平等的现象引起的。
参照平等
首先，在 javascript 中，我们必须了解两个 Array 或 Object 并不完全相等，即使它们共享相同的值。
解决方案
我们可以通过使用 react 的 useMemo hooks 来解决上述问题。下面给出了上述代码的 useMemo 钩子的实现。
这里引用平等是通过使用 useMemo 及其记忆的返回值来解决的，这有助于我们避免不必要地重新运行 useEffect 钩子。
示例 2：
让我们看另一个例子，稍微修改一下上面的代码。
问题 ：
在这段代码中，我们只需要记住两件事。一、有三个功能 添加待办事项 , 昂贵的计算， 和 增量 .和 昂贵的计算 功能只是通过 增量 , 添加待办事项 没有任何关系 昂贵的计算 .
在这里我们可以看到 昂贵的计算 每当我们点击时正在运行 全部添加 点击按钮事件 全部添加 按钮它与 昂贵的计算 功能。导致此问题的原因是，只要组件的任何状态发生更改，React 应用程序就会运行组件中的所有代码 常量计算 = 昂贵计算（计数）； 当我们点击时执行 全部添加 这允许改变状态 全部 .
解决方案
上述问题避免使用 useMemo 钩子。下面给出了上述代码的 useMemo 钩子的实现。
在这里我们可以看到 昂贵的计算 单击时未运行 全部添加 按钮事件。由于 useMemo 钩子解决了上述问题，正如我上面提到的，useMemo 仅在其依赖项之一发生更改时才重新计算该值。在我们的例子中，依赖计数没有改变，所以 useMemo 钩子不允许重新运行 昂贵的计算 .
结论
因此，当我们需要避免昂贵的计算和不必要的子组件重新渲染以增强和优化我们的反应应用程序性能时，我们得出结论使用 useMemo 钩子。
谢谢！！！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
