【react-hooks】当useMemo的依赖数组之间互相存在依赖关系的时候,会有重复执行?
比如说,购物车计算总价(总价 = 购物车商品总价 - 优惠券满减),优惠券是根据购物车内商品数量或者选中的商品类型决定的。。。这样的话给总价使用useMemo
的时候,依赖的数组就是[选中商品总价,优惠券]
,我使用useEffect
监听选中商品变化,在useEffect
里更改优惠券,这样的话优惠券改变和选中商品改变会让总价useMemo
执行多次???如何避免重复执行两次呢?
const [ x, setX ] = useState(true) // 假设这是选中商品
const [ y, setY ] = useState(false) // 假设这是优惠券
useEffect(() => { // 渲染后执行
if (x) { // 选中商品后更改优惠券
setY(false)
} else {
setY(true)
}
}, [x])
const toggle = () => { // 更改选中商品
setX(!x)
}
// 计算得到总价~~~~
const xy = useMemo(() => { // 渲染中执行
console.log('useMemo') // toggle执行,这里会执行两次console
return x + '|' + y
}, [x, y])
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论