咳咳，首先允许我标题党一下哈 (其实就是我`调了几个小时`的一个 antd-issue 中的 css 问题
我不相信有人真的能搞定它当然也有可能是我太菜了呜呜呜回归正题，一个小小的css至于让好吃懒做的我发一篇文章吗其实这个css问题可`大有来头`啦！
它来自于我们国内最大的React组件库 - `AntDesign`
且听我慢慢道来 ![d4523e74b341bcfb0f751582c1a2fa41.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1adde16ef6e34249ae1ccdfbf5efe77a~tplv-k3u1fbpfcp-watermark.image?)
事情的起因呢其实是某一天 AntDesign的核心贡献者 `偏右`大佬在某个issue下艾特了AntDesign的 Collaborators
作为AntDesign的小粉丝我的邮箱立马收到了这个comment ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3770836b3dae4f389c4ef15541e5cf8f~tplv-k3u1fbpfcp-watermark.image?) （ Collaborators就类似于AntDesign的成员这样子而上班正在摸鱼的我刚好看到了这个 comment 所以立马点开这个看了一下
https://github.com/ant-design/ant-design/issues/41878 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4de4e105b728485b91836a6493b37b3b~tplv-k3u1fbpfcp-watermark.image?) ![20230512040339_rec_.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d4fd8656b5246f9a03031610c257f28~tplv-k3u1fbpfcp-watermark.image?) 好家伙已经是`三周前`的issue了而且还是AntDesign的维护者之一的大佬`jianan`自己提的issue
怎么`没有人管`呢所以偏右大佬才艾特所有人
所以上班摸鱼的我立马就来啦！打开 codeSandbox 自己调试了一下发现
擦为什么真的会闪烁一下而且这个闪烁不是百分百复现
这**用户体验直接烂掉** 哒咩！
于是我就在思考这个问题该从哪里入手 ### 猜测一 - diff算法什么！？diff算法是什么鬼？咳咳为什么会先想到这个东东呢首先因为他是八股文(x
当然不是首先众所周知像 `List` `Tree` 这种通过多种节点重复遍历得到的元素我们需要给每个加上一个`key`，这样有利于 diff 算法去比较然后 update
怎么样我八股文是不是很厉害 ![21494ca10b23d18f24c4e1f3f82616d1.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4b6582301fe42b28d397dd3ae03831c~tplv-k3u1fbpfcp-watermark.image?)
咳咳说歪了这里会闪烁说明在TreeData这个数据更新的时候元素进行diff发现了不一样的地方所以要重新渲染
那么我可以合理的猜想是不是因为这里``之前的key``和``当前更新后的key``是不是`不一样` 导致他页面`回流`的成本过大造成了这样的闪烁呢？🤔
那我们试试前后元素的`key`不变会怎么样原始数据是这样 ```ts const [treeData, setTreeData] = useState([ { key: "1-1", title: "1-1", children: [ { key: "1-1-1", title: "1-1-1" }, { key: "1-1-2", title: "1-1-2" }, { key: "1-1-3", title: "1-1-3" } ] }, { key: "1-2", title: "1-2", children: [ { key: "1-2-1", title: "1-2-1" }, { key: "1-2-2", title: "1-2-2" }, { key: "1-2-3", title: "1-2-3" } ] }, { key: "1-3", title: "1-3" }， ]); ``` 出现闪烁的 Button 的`删除事件`是这样的 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/327bd24f569043d6b2915399d3dca5a4~tplv-k3u1fbpfcp-watermark.image?) 现在我们把它的 key 前后保持一致 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03a27cd48dab45629afedb3b49570fc8~tplv-k3u1fbpfcp-watermark.image?) 这样所有元素的 key 就都没有变化啦只有最后一个元素直接被删除了 ![20230512042340_rec_.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e770b1cb6079426c9fbe72ad2b6700aa~tplv-k3u1fbpfcp-watermark.image?) OK 本篇文章到此结束！
当然不可能啦！ ![baa26e7551a511ef1e7e8c08f653421d.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb2279632dd646e7a94c31766afc74c4~tplv-k3u1fbpfcp-watermark.image?)
天真的我以为发现是事情的本质和这个 issue 的解法
这么简单！让以后的开发者`保持 key 不变`不就行啦！
于是就出现了这条评论 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba241faf1c624f93a613c97a19259bea~tplv-k3u1fbpfcp-watermark.image?) 当我美滋滋的准备给偏右大佬报喜的时候突然想到是不是该看下 antd 的底层库是不是也有这个问题这样就能水两个pr啦！
(其实为了真正确定问题的原因是处在 `AntDesign` 这个库还是底层的 `react-component` 这个库
我 clone 下来了 `rc-tree` 来调试启动+本地写测试的用例
ok 看看效果 ![20230512043329_rec_.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b65a10aa4c1472aa159af252a489b91~tplv-k3u1fbpfcp-watermark.image?) 太好啦！`rc-tree` 是没有问题的!
突然我的邮箱收到了另一位同学的留言 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27474383a655437188cac7df5cfbafef~tplv-k3u1fbpfcp-watermark.image?)
还在高兴的我看到这条留言愣住了 **不对啊** md
rc-tree 没问题说明 diff (功能) 是没问题的说明问题`根本不是`上面分析的那个key啊！！ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b86d9bca57d14088ba838aa72c71801a~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b749d67b9d642caa4892d6bdbe5aa6e~tplv-k3u1fbpfcp-watermark.image?) 那咋办呢评论都评论了总不能跑路吧 (也不是不行
当然不行！
那就继续找找原因 ### 猜测二 - AntDesign层额外的类名带来的样式导致闪烁 `AntDesign/tree`是基于 `rc-tree` 开发的
rc-tree没问题说明功能是没问题的不太可能是类似于diff啊或者中间计算啊这些原因导致的那很可能就是由于AntDesign带来的额外样式导致的
那我们就去找找他的`样式` 众所周知 `AntDesign5`采用的是组件级别的`cssinjs方案` 所以想要更改组件的样式还有组件自带的样式只需要找他组件上的 `ClassNames` 就可以了
于是去源码里面找类名找到你了 **桀桀桀...**（发出了反派的笑声） ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b186e3e91f0455599200be6a61d0677~tplv-k3u1fbpfcp-watermark.image?) 就这一坨我挨个试
一个一个关掉去看看他渲染出来的Tree在删除节点的时候会不会闪烁
终于在我使用了`对照实验法`+`排除法`一个一个比对过去后终于找到啦
真相只有一个！就是你 -- `hashId` 当去掉 `hashId` 之后就不会有闪烁的情况了
![EA4C99F6-A0A1-433E-9355-4C1D1203F66F.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7cbfea6c1ba54b93a928cccce35cf1f2~tplv-k3u1fbpfcp-watermark.image?) (欣喜若狂再看看是谁提交的 `hashId` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f5ea66af8c84a42aa4020df9b71abe9~tplv-k3u1fbpfcp-watermark.image?) 糟了！是`大佬豆酱` ---g
(此时的笨比小洋还不知道 `hashId` 是啥玩意只知道去掉它就没有闪烁了
但是想了想豆酱提交他肯定有他的道理
于是点开看看豆酱提交的[pr](https://github.com/ant-design/ant-design/pull/34272/files) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eaa4530e885d491494d7e84da0f87fd5~tplv-k3u1fbpfcp-watermark.image?) 晕了这么多这到底是个啥啊还是直接去问豆酱算了 -- 可恶我才不是菜鸟 (其实就是看不懂嘿嘿于是笨比小洋以为他找到了答案
(推了推眼镜真相只有一个 **凶手就是你豆酱！！！！！** ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8319c7ad7dd24d6da7460bf39963ed20~tplv-k3u1fbpfcp-watermark.image?) 虽然豆酱也不知道自己做了什么但是 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3680d123bb04b8f89cc75f5825591cb~tplv-k3u1fbpfcp-watermark.image?) 豆酱内心os：虽然不知道我干了啥但是这小子气势这么强大先鞠个躬再说但是此时豆酱正在忙于各种issue ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17666cfbb2ab4516b99c22a7a6a0327c~tplv-k3u1fbpfcp-watermark.image?) 于是我只能晚上再请教豆酱这个hashId到底是啥玩意了 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/23bf0ff95e754361a168ef7c44e79e37~tplv-k3u1fbpfcp-watermark.image?) 咳咳言归正传！！没有大佬菜鸡自己琢磨对这个hashId追根溯源发现它来自于 @ant-design/cssinjs 这个库
这个库是 AntDesign 自己的组件级cssinjs库
这都是啥啊组件级cssinjs库要 `hashId` 干啥啊 😭 于是被迫去看了AntDesign的cssinjs源码和闲夕大佬写的[组件级cssinjs的文章](https://ant.design/docs/blog/css-in-js-cn) 喵的我理解什么是组件级cssinjs了但是喵的到底啥是hashId啊！！喵的不管了到点了下班先吃饭等豆酱！！
终于 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d5bcdf763df415c80543744e07837cc~tplv-k3u1fbpfcp-watermark.image?) 纳尼！又没关系为什么啊呜呜呜 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/965210d834b34ccb8b197dbe61e9a5d1~tplv-k3u1fbpfcp-watermark.image?) 我已经迷了！！！都是什么跟什么啊 md ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fbbef0d4400f4cb5b112540962c291e1~tplv-k3u1fbpfcp-watermark.image?) 等会此时我还是有点懵的啥？`样式丢了`？
对啊 md 我组件样式怎么全没了
联想到 cssinjs 和 antd 的classname
喵的我知道了 hashid控制的是整个`antd这一层`的`ClassNames`也就是说我现在去掉 `hashId` 该组件的所有cssinjs的类名就就全都g了 ![c497bc31c5017122c2873e8dbd90c5b7.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1eb07389eefe4b648db6a1f7111ce1a6~tplv-k3u1fbpfcp-watermark.image?)
此时的我已经有点绷不住了---又错了现在后悔还来得及吗有这时间我都能修几个issue了呜呜呜呜喵的不能轻易言败！！继续！ ### 猜测三 - 观察慢动作闪烁发现 TreeNode下的后面部分整体向前漂移导致闪烁猜测TreeNode源码机制导致这一部分呢就是整个TreeNode的render节点了 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/927c87145efe464d9dd43961a8d8cbdc~tplv-k3u1fbpfcp-watermark.image?) 我们可以看到其实一个TreeNode是由这么多小节点组成的 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d8412b321b54d2f835795ba282dfaa4~tplv-k3u1fbpfcp-watermark.image?)
当然还有 `checkbox` 只是这个例子没有使用我知道了！！一定是重新渲染的时候 `前面的小节点计算过慢` 导致最后一个也就是我们最重要的文本节点 `renderSelector`这里函数触发之后渲染太慢了
所以我只需要提前收集起来判断前面的所有小节点是否需要渲染如果没有任何一个小节点需要渲染就不执行前面几个render函数只执行最后一个`renderSelector` 这样不就大大节省了前面几个render所需要的时间了吗我真聪明嘿嘿说干就干但是由于：
1. `rc-tree` 是个很老的仓库了用的是React`类组件` 2. 之前是每个 render 函数里面去生成是否 render DOM 的逻辑所以我要在 `constructor` 里面去重新收集一遍状态总而言之就是大自然的搬运工代码过于恶心就给大家看看一点 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97dda2e7bbcd4e7ca1d61016ca8218f0~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07ff96e39828403fb5397312df830a2e~tplv-k3u1fbpfcp-watermark.image?) 突然发现这个没有 `render` 函数我这里还不好判断他是否渲染。。。 c ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08208625b20b4c55a9ed02290fb948dc~tplv-k3u1fbpfcp-watermark.image?) 算了硬着头皮跑一下测试用例虽然知道大概率要g ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/153d6786f7444d5f8321a9c69b7ab678~tplv-k3u1fbpfcp-watermark.image?) 这已经是测试用例挂的最少的版本了还是挂了两个 `Test Suites`
寄咯！！ ![8077f9a81916ca1780059e5bbd986406.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d09bfad4db84ef48c42dadf74e85c25~tplv-k3u1fbpfcp-watermark.image?)
我是谁我在哪 😭 ### 猜测四 - 调试一生之敌 css！！直接上手调试Style 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈我没有疯！！打开谷歌浏览器 F12 审查元素手动编辑DOM元素复制删除添加拷贝CSS 哈哈哈哈哈我真的没有疯哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈再次打开谷歌浏览器 F12 审查元素手动编辑DOM元素复制删除添加拷贝CSS 源码css增删改哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈终于在调试很久很久之后让我发现了关键元素`` 只要删除它就不会产生闪烁
或者在他的位置放置其他任何元素都不会造成塌陷 ![20230512060227_rec_.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a64d1a75c42f4afd9821fa753664226d~tplv-k3u1fbpfcp-watermark.image?) 那就是``的原因的塌陷的原因到底是什么呢？？
父组件的flex？子组件的宽度？属性值为0的height？？
一个一个尝试。。。。
甚至将整个rc-tree的css都搬过来也没找到答案依旧会塌陷终于在调试css近一个多小时后发现只要在``加上`宽度`就不会塌陷了但问题是 rc-tree的css上并没有宽度却也没有塌陷 -- 这肯定不是`最终的解法`
-- 最终的解法肯定是通过类似于`rc-tree的css`去解
##### 但目前通过给``加上`宽度`就能改变塌陷的现状
![20230512063807_rec_.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2706b1af1ac4d4193cea20ef8aba833~tplv-k3u1fbpfcp-watermark.image?)
于是乎深入``源码你能根据下图给他加上 width 并保证通过所有测试用例吗
也就是和之前所有的case 保持一致不会产生视图的变化 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50ef7f0f07154523b4ae3ae68a32d05f~tplv-k3u1fbpfcp-watermark.image?) 5秒钟后公布本菜鸡的做法
5
4
3
2
1
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c58050986f374e4c8fd677d1917f28c4~tplv-k3u1fbpfcp-watermark.image?)
ok 我们看看效果: ![20230512063625_rec_.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd3ec2e587bb4a21b20120eaef16046b~tplv-k3u1fbpfcp-watermark.image?) `rc-tree`单元测试 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f5311a7f0884897934574c427675976~tplv-k3u1fbpfcp-watermark.image?)
`antd`单元测试 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8d76ed3e8f84b1d86765c466a841855~tplv-k3u1fbpfcp-watermark.image?)
终于结束啦！！！
小声：虽然可能并不是最后的答案！
之前还有猜测过是不是 cssinjs 的计算性能消耗导致的
因为不是百分百会塌陷几乎和 rc—tree 一样的 css 也会塌，有时候计算时间快则不会塌陷，计算慢则会塌
当然我现在还没找到真正的原因但是这次bug解决之旅真的很`折磨`
不过解决了之后真的非常的`开心`！！😄
另外附上`rc-tree`与`AntDesign/Tree` **调试**的 codeSandbox 链接
https://codesandbox.io/s/ji-ben-antd-5-4-2-forked-vfq5pc
https://codesandbox.io/s/kind-matan-n1j52m
欢迎css大佬打开 F12 调试 Style 指出正确的`css解法`
我真的太想知道答案了！！