React useMemo 钩子用例

Question

语境

在阅读了 hooks 的官方文档后，我想在我的一个项目中尝试useMemo。

为了测试它，我在这里设置了一个沙箱项目。

该示例在每次输入更改时使用昂贵的计算（请参阅“经过的毫秒”）。每次运行这种昂贵的计算时，计数器都会增加（参见“计数器”）。

Example 非常适合记忆，所以我使用useMemo hook，但结果不是我预期的，让我相信我在这里从根本上误解了一些东西。

---

预期的：

• 首先呈现缓慢：计算&& 计数器递增值
• 在没有计数器增量的情况下重新渲染近乎即时的计算

---

实际的：

尽管输入相同，但每次 && 计数器每次都会增加计算速度。

同样，这里是该项目的链接。我的错误在哪里？

Answer 1

useMemo每次值更改时都会触发，因为您将其添加[value]为第二个参数。这就是为什么在输入中插入新值会导致新的计算。useMemo用于防止不必要的计算，如果其他东西（而不是值）发生变化。但由于唯一可以改变的是你的价值，所以你每次都会看到计算完成。如果组件具有更多状态/属性值，您会发现如果这些其他状态/属性值发生变化，计算将被跳过。希望这能让它更清楚。快乐编码。