fix: header column resize delay #731
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/react-component/table/57xzRapUus1qL1dSk8ybKJrGaTDM |
|
@zombieJ 哥，有空看一下 🎈 |
| return () => { | ||
| raf.cancel(rafIdRef.current); | ||
| }; | ||
| }, []); |
There was a problem hiding this comment.
这样会不会造成 #706 提到的性能问题。
cc @curly210102
There was a problem hiding this comment.
这里是对连续 resize 的优化，连续拖动的情况较少就先放一边了，主要考虑侧边栏切换动画的场景
可以先看下 Demo：
- 带 2 帧延迟的效果
https://table-b013hlf1k-curly210102.vercel.app/demo/fixed-columns-resize - 不带延迟的效果
https://table-4o7mo1f65-curly210102.vercel.app/demo/fixed-columns-resize
延迟可以减缓掉帧让 resize 看上去更流畅一点，但整体体验上差异比较细微，考虑到同步性 > 细微优化，个人觉得可以把延迟去掉。
There was a problem hiding this comment.
@curly210102 没太明白，是说这个 PR 没问题可合是么？
Codecov Report
@@ Coverage Diff @@
## master #731 +/- ##
==========================================
- Coverage 99.37% 99.36% -0.01%
==========================================
Files 33 33
Lines 964 951 -13
Branches 278 277 -1
==========================================
- Hits 958 945 -13
Misses 6 6
Continue to review full report at Codecov.
|
| return () => { | ||
| raf.cancel(rafIdRef.current); | ||
| }; | ||
| }, []); |
There was a problem hiding this comment.
这里是对连续 resize 的优化，连续拖动的情况较少就先放一边了，主要考虑侧边栏切换动画的场景
可以先看下 Demo：
- 带 2 帧延迟的效果
https://table-b013hlf1k-curly210102.vercel.app/demo/fixed-columns-resize - 不带延迟的效果
https://table-4o7mo1f65-curly210102.vercel.app/demo/fixed-columns-resize
延迟可以减缓掉帧让 resize 看上去更流畅一点，但整体体验上差异比较细微，考虑到同步性 > 细微优化，个人觉得可以把延迟去掉。
src/Body/MeasureRow.tsx
Outdated
| <ResizeObserver.Collection | ||
| onBatchResize={infoList => { | ||
| infoList.forEach(({ data: columnKey, size }) => { | ||
| resizedColumnsRef.current.set(columnKey, size.offsetWidth); |
There was a problem hiding this comment.
去延迟的话，这边应该不需要存到 resizedColumnsRef 了，直接拿 infoList 操作就好
There was a problem hiding this comment.
那我这边改一下哈 @curly210102
There was a problem hiding this comment.
加了2帧延迟的视觉上看起来更流畅，请问如果把header和body都加上延迟会怎样呢，可以实现既同步又流畅吗 @curly210102
问题描述
由于延迟更新column宽度，导致表头表body宽度更新不同步
相关issuse
ant-design/ant-design#33545
解决方案
移除2帧的延迟