fix(color-picker): 修复useRef缓存引起的color实例内部属性未更新，导致的在Form中reset引起的死循环 #3120
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
huangchen1031
requested review from
honkinglin,
uyarn,
carolin913,
HaixingOoO,
NWYLZW and
ZWkang
as code owners
|
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
🤔 这个 PR 的性质是？
🔗 相关 Issue
tdesign-react ， Form 和 ColorPicker 一起用时，重置表单会直接进入死循环渲染，下面的例子，选颜色后，点重置，死循环渲染了 。
https://stackblitz.com/edit/react-fy5y49?file=src%2Fdemo.tsx
💡 需求背景和解决方案
1、在Form中reset事件会重置ColorPicker的value属性；
2、在ColorPanel中value变化会调用update方法；
3、colorInstanceRef中的originColor由于缓存问题和实际颜色不一致：
导致color实例的update方法没有进行更新：
所以ColorPanel的useEffect中颜色对比不一致，导致update方法会循环触发：
4、原因是在ColorPicker重绘时，useRef中使用的对象有奇妙的缓存问题：
新的color实例在useRef的时候originColor属性被还原了...
📝 更新日志
fix(组件color-picker): 修复useRef缓存引起的color实例内部属性未更新，导致的在Form中reset引起的死循环
本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单