feat: use css hover when no rowSpan #1079
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
linxianxi
changed the title
linxianxi
force-pushed
the
feat-use-css-hover
branch
from
e95ffd9 to
f5b9539
Compare
|
用例挂了 |
|
还没去改，想先让豆酱看看这样可不可行 |
| @@ -129,6 +129,15 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>( | |||
| const computedExpandedRowClassName = | |||
| expandedRowClassName && expandedRowClassName(record, index, indent); | |||
|
|
|||
| const cellPropsArray = flattenColumns.map((column, colIndex) => | |||
| getCellProps(rowInfo, column, colIndex, indent, index), | |||
There was a problem hiding this comment.
部分行用 css，部分行用 js 感觉很怪异。这里需要用 CSS Hover 的原因是？
There was a problem hiding this comment.
不会加 class 导致 render，antd 那边好多 issue 提过这个问题。其实很少情况下会使用行合并，所以默认用 css hover 比较好
There was a problem hiding this comment.
刚刚去看了看其它 ui 库或 table 库，有这些情况
1、Table 完全没 hover 样式，所以就不会有这个问题
2、没有处理行合并的 hover 问题，有问题
3、element-plus 有处理，看了代码，也是检测 rowSpan，部分用 css，部分用 js。只是实现方式不太一样
There was a problem hiding this comment.
加 className 后内部的元素是被 memo 的，这个能细说说渲染问题不~
There was a problem hiding this comment.
就是 hover 的那一行会重新 render 一下，优化这个而已
There was a problem hiding this comment.
我意思是说这个 hover 添加 className 的损耗问题，是不是 shouldCellUpdate 就解决了？
There was a problem hiding this comment.
className 改变了，都是会 render 的呀，shouldCellUpdate 没用。
There was a problem hiding this comment.
shouldCellUpdate: () => false，tr 也会 render 的，只会 memo tr 里的 children，而且 shouldCellUpdate 只能对比 record，没有其它 props。并且应该在底层解决这个 hover 的影响吧。
There was a problem hiding this comment.
就体感上，td 渲染应该没那么损耗性能才对。因为大头 render 已经被跳过了。
1、当前这行有某个 cell 的 rowSpan 不为 1 时，使用 js 的 hover。如果都为 1，使用 css hover。
2、legacyCellProps 里的 rowSpan 先不判断了，我看 virtual-table 代码里也没判断，没人用了吧，有问题再说？否则要在 row 每个再算一遍，或者传到 cell 里。
ref: ant-design/ant-design#32979
ref: ant-design/ant-design#46934