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监听不到useRef的数据变化 #2236

Closed
edc-hui opened this issue Jun 28, 2023 · 5 comments
Closed

useDeepCompareEffect监听不到useRef的数据变化 #2236

edc-hui opened this issue Jun 28, 2023 · 5 comments

Comments

@edc-hui
Copy link

edc-hui commented Jun 28, 2023

描述:
使用useDeepCompareEffect去监听useRef上挂载的引用类型数据,当引用类型数据变化后,同时组件也重新触发渲染,但是useDeepCompareEffect的回调函数并没有执行。

bug演示Demo地址:
https://codesandbox.io/s/lively-pond-kxj8zv?file=/src/App.js

修改意见:
应该在packages/hooks/src/createDeepCompareEffect/index.ts文件的第13行代码,对deps进行深拷贝,否则对于引用类型的数据来说储存的是引用地址,在执行!depsEqual(deps, ref.current)的时候,deps与ref.current永远都是同一个值。
image

@1587315093
Copy link

ref 的更新并不会造成组件rerender,组件不 renderuseEffect 也就不执行了

@edc-hui
Copy link
Author

edc-hui commented Jun 29, 2023

ref 的更新并不会造成组件rerender,组件不 renderuseEffect 也就不执行了

你说的这个我知道,但是我额外定义一个useState,去触发组件的rerender,这样就可以监听到useEffect的依赖项变化。本质就是触发rerender,让useEffect重新执行,这样useEffect的依赖项全会被监听到,无论是props,还是state,还是ref,亦或是window对象身上的一个属性

@1587315093
Copy link

所以这不是深浅拷贝的问题

@edc-hui
Copy link
Author

edc-hui commented Jun 29, 2023

嗯 意思是现在useDeepCompareEffect的实现是没任何问题的么?

@hchlq
Copy link
Collaborator

hchlq commented Jun 30, 2023

不要改引用的值哈,建议还是业务去做处理

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

3 participants