React useMemo钩子用例

Question

上下文

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

要测试它，我设置了一个沙箱项目here。

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

示例对于memoization是完美的，所以我使用useMemo钩子，但是结果不是我期望的，这使我相信我从根本上误解了某些内容。

---

预期：

• 首次渲染缓慢：值的计算&&计数器递增
• 渲染器，即时计算几乎没有计数器增加

---

实际：

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

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

Answer 1

每次更改值都会触发

useMemo，因为您将[value]作为第二个参数添加了它。这就是为什么在输入中插入新值会导致新的计算。 useMemo用于防止不必要的计算（如果不是价值而是其他值）发生更改。但是，由于唯一可以改变的是您的价值，因此您会看到每次都在进行计算。如果组件具有更多的状态/属性值，那么如果这些其他状态/属性值发生更改，您将看到计算将被跳过。希望这使事情变得更清楚。编码愉快。