反应 useMemo 钩子用例
Posted
技术标签:
【中文标题】反应 useMemo 钩子用例【英文标题】:React useMemo hook use case 【发布时间】:2019-08-02 10:37:29 【问题描述】:上下文
在阅读了 hooks 的官方文档后,我想在我的一个项目中尝试useMemo。
为了测试它,我设置了一个沙盒项目here。
该示例在每次输入更改时都使用昂贵的计算(请参阅“ellapsed ms”)。每次运行这种昂贵的计算时,计数器都会增加(请参阅“counter”)。
示例非常适合memoization,所以我使用useMemo 钩子,但结果不是我所期望的,这让我相信我在这里从根本上误解了一些东西。
预期:
第一次渲染慢:计算 && 计数器递增值 重新渲染接近即时计算,没有计数器增量实际:
尽管输入相同,但每次计算都很慢 && 计数器每次递增。
同样,here 是项目的链接。我的错在哪里?
【问题讨论】:
【参考方案1】:useMemo
每次值更改时都会触发,因为您将[value]
添加为第二个参数。这就是为什么在输入中插入一个新值会导致一个新的计算。 useMemo
用于防止不必要的计算,如果其他东西(但不是值)发生变化。但由于唯一可以改变的是你的价值,你每次都会看到计算完成。如果组件有更多的 state/prop 值,如果这些其他 state/prop 值发生变化,您会看到计算将被跳过。希望这能让它更清楚。编码愉快。
【讨论】:
所以要明确一点,它不使用基于 [value] 的记忆,相反,它忽略除 [value] 上的所有更改。既然你解释了它,它就像 useEffect 的 deps 变量一样。有道理 是的,在每次渲染时,它都会检查值是否改变。如果是这样,计算将被触发。如果没有,则返回之前计算的值,以上是关于反应 useMemo 钩子用例的主要内容,如果未能解决你的问题,请参考以下文章