Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useDeepCompareEffect 比较 deps 的过程使用 isEqual 不合理 #2296

Closed
Firstsup opened this issue Aug 17, 2023 · 3 comments
Closed

useDeepCompareEffect 比较 deps 的过程使用 isEqual 不合理 #2296

Firstsup opened this issue Aug 17, 2023 · 3 comments

Comments

@Firstsup
Copy link

问题:useDeepCompareEffect 应该是期望深度比较 deps 的值是否发生更改,如果更改则执行 effect。但是如果 deps 的值属于引用类型,修改 deps 产生新的 deps 也会导致旧的 deps 一起被修改,Lodash 的 isEqual 会判断二者相同,进而导致 useDeepCompareEffect 并不能正确识别到变更。

建议:可以缓存一份旧的 deps 的 cloneDeep 版本,防止修改新 deps 时旧的 deps 也被改变,这样才能真正识别到 deps 的改变。

CodeSandbox Link

@liuyib
Copy link
Collaborator

liuyib commented Aug 17, 2023

你的 demo 中 deps.push(1) 并不会触发 rerender,何谈 useDeepCompareEffect 有没有重新执行?不推荐把 useEffect 当监听器用,建议尽早摒弃这个思维。

@Firstsup
Copy link
Author

@liuyib 是的,demo 写的有问题,已经更新了 demo,不好意思。当前情况下每次点击按钮都会更新,但是 useDeepCompareEffect 没有执行,只是想请问一下这种情况是否是在预期内的:即使前后的值有所不同,但是由于修改引用类型导致前后值一同改变,hooks 识别不到改动。

@liuyib
Copy link
Collaborator

liuyib commented Aug 17, 2023

相关 issue:#2236,和这个问题几乎一样。

首先,如果 useDeepCompareEffect 底层去深拷贝,然后再做对比,这样效果肯定是很好的,仅仅是“效果”,也就是用户想怎么改引用就怎么改,useDeepCompareEffect 都能对比出来,爽的起飞。

但为什么不推荐这样处理:

  1. 每次都对依赖数组深拷贝,性能肯定有损失
  2. JS 中各种骚操作,各种改引用、改原型等等,这样操作带来的问题我就不用多说了。在 react 中依然是不推荐这些做法,尤其直接改引用大家做的比较多

所以,还是建议不要直接改引用,业务里自己深拷贝处理再改引用,或者其他方法,就各显神通了。

对于 useDeepCompareEffect,我后面在文档里标注上,不推荐直接改依赖数组中数据的引用。 应该会有新 hook 通过参数来支持这种修改引用的情况:#2171 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants