反应 useMemo 钩子用例

Question

上下文

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

为了测试它，我设置了一个沙盒项目here。

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

示例非常适合memoization，所以我使用useMemo 钩子，但结果不是我所期望的，这让我相信我在这里从根本上误解了一些东西。

---

预期：

• 第一次渲染慢：计算 && 计数器递增值
• 重新渲染接近即时计算，没有计数器增量

---

实际：

尽管输入相同，但每次计算都很慢 && 计数器每次递增。

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

Answer 1

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