fix: resolves depsEqual performance issues (#2577) #2578
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
[English Template / 英文模板]
🤔 这个变动的性质是?
🔗 相关 Issue
#2577 [useDeepCompareEffect] 在组件re-render时进行depsEqual造成性能问题
💡 需求背景和解决方案
背景: 在更新 State 为相同数据后,depsEqual 判断依赖数据没有变化,ref.current 的值没有进行更新,导致后续页面上组件因为其他State/Props进行re-render时,useDeepCompareEffect会一直进行深度对比,导致严重的性能问题(因为真实数据层级较多)。
解决方案: 无论 depsEqual 相同或者不同,都要记录上次 render 的依赖的变化。具体执行逻辑参考 codesanbox 中的 newCreateDeepCompareEffect 。
复现步骤:
createDeepCompareEffect 的 log 如下:
![image](https://private-user-images.githubusercontent.com/19359849/342090793-74c87a2c-3460-4d34-a65f-aa7091cbe531.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzMDQ0MzAsIm5iZiI6MTczOTMwNDEzMCwicGF0aCI6Ii8xOTM1OTg0OS8zNDIwOTA3OTMtNzRjODdhMmMtMzQ2MC00ZDM0LWE2NWYtYWE3MDkxY2JlNTMxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjExVDIwMDIxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk3NmU4ZjQwZjBjM2ExYzlhZThiZjYwNTQ5Yjc5OWZmMmRmZTczYjJhMzE4NmU0N2IzNjllYWZhNTJhZTgwYjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.AOY8j3TqXast0tazYaeuFUthoi_ufk3ND3uAmmiJc08)
useDeepCompareEffectNew 的 log 如下:
![image](https://private-user-images.githubusercontent.com/19359849/342090852-24cf9a4b-14e1-463b-8dc3-54a0fe74eef8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzMDQ0MzAsIm5iZiI6MTczOTMwNDEzMCwicGF0aCI6Ii8xOTM1OTg0OS8zNDIwOTA4NTItMjRjZjlhNGItMTRlMS00NjNiLThkYzMtNTRhMGZlNzRlZWY4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjExVDIwMDIxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY2Yzk0NWVhNmI5MjU4OTZiODg2MDIzMDAxMDg2MmE0YjBhMzkxNzRmOWExZDdlZmEyNGQzMWNjZjkwNzJlYTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ASoX76T4ZjB-C45_kOAf1-6xEtwd397b1Tg-wX4Q8Vo)
可以观察到,depsEqual 执行的判断明显减少
📝 更新日志
☑️ 请求合并前的自查清单