search

ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.04k stars 1.29k forks source link

🐛[BUG] pro-table 的 columns 的 valueEnum 枚举值很多（500+）时，点击查询很卡顿 #1515

Closed bluescurry closed 3 years ago

bluescurry commented 3 years ago

🧐 问题描述

pro-table 的 columns 的 valueEnum 枚举值很多（500+）时，点击查询时要等2s才会发送接口请求，很卡顿，体验不太好。 打印了一下日志，页面首次加载时，valueEnum 和 renderText 都执行了进百次，是否能提供一些优化方案？

💻 示例代码

https://codesandbox.io/s/competent-night-co9tp?file=/App.tsx:1238-1247

chenshuai2144 commented 3 years ago

我想办法优化下性能，只render 50+次

bluescurry commented 3 years ago

我想办法优化下性能，只render 50+次

请问一下，这个问题release了吗

chenshuai2144 commented 3 years ago

发布了，可以安装试试看

bluescurry commented 3 years ago

发布了，可以安装试试看

好的，我试试

bluescurry commented 3 years ago

发布了，可以安装试试看

我试了下，用的还是这个示例（https://codesandbox.io/s/competent-night-co9tp?file=/App.tsx:1238-1247） 还有自己的业务项目。确实是有一些效果，不过还是没有满足预期效果，点了“查询按钮”后依然会卡死大概1.5s-2s，想问问还能再优化一下吗，或者是否可以说一下在点击”查询“时的耗时操作在哪里，使用者是否可以通过一些类似useMemo、react.memo 的方式自主控制渲染次数达到预期效果？

chenshuai2144 commented 3 years ago

你来个重现吧。我看看内存和cpu占用

bluescurry commented 3 years ago

你来个重现吧。我看看内存和cpu占用

https://codesandbox.io/s/competent-night-co9tp?file=/App.tsx:1238-1247 这个示例就可以的，点”查看“会有明显的卡顿

chenshuai2144 commented 3 years ago

看到了，你这个有点不人道呀，应该用树选择器，这样性能就好很多了。

主要事件消耗在了 计算 options 和 计算 table 中应该显示什么

bluescurry commented 3 years ago

看到了，你这个有点不人道呀，应该用树选择器，这样性能就好很多了。

主要事件消耗在了 计算 options 和 计算 table 中应该显示什么

哈哈，可是城市数据就一级啊，treeSelect 更适用于展示多级数据嘛

chenshuai2144 commented 3 years ago

你可以区分一下省，我选了半天都没找到杭州和太原

bluescurry commented 3 years ago

看到了，你这个有点不人道呀，应该用树选择器，这样性能就好很多了。

主要事件消耗在了 计算 options 和 计算 table 中应该显示什么

我觉得这个场景应该比较常见的，请问有优化方案吗，现在是卡在这个性能瓶颈不能上线。。。

chenshuai2144 commented 3 years ago

不常见的，你还是关掉这个吧。一个计算需要 1ms。 500 个就肉眼可见了。

bluescurry commented 3 years ago

你可以区分一下省，我选了半天都没找到杭州和太原

恩。。。这个基础数据格式我决定不了~ 是后端的返回数据，需求层可能不好改了 针对这种 options 很多的 select 场景我觉得比较常见，不然 select 也不会默认开启虚拟滚动了

bluescurry commented 3 years ago

不常见的，你还是关掉这个吧。一个计算需要 1ms。 500 个就肉眼可见了。

我们不能因为不好实现而把场景需求直接干掉啊哈哈，如果从pro-table底层无法优化的话，那我是不是可以针对这种场景自定义render一个组件，然后内部控制 option 是否要重新渲染呢

chenshuai2144 commented 3 years ago

那你可能要做很多工作还要写很多缓存类的代码。

缓存什么失效时计算机领域最难的问题之一，我建议你不要这么搞

bluescurry commented 3 years ago

那你可能要做很多工作还要写很多缓存类的代码。

缓存什么失效时计算机领域最难的问题之一，我建议你不要这么搞

这个城市数据属于常量数据，首次加载后就不会变了，我的想法是判断数组的长度，只要长度不变，我可以默认认为这个数据就没有，就不需要重新render

chenshuai2144 commented 3 years ago

可以更狠一点，认为它永远不会改变。这样就可以用 react.memo 做出来性能非常好的组件。

如果它真的改变了，你是可以知道的，直接修改一下key，让组件销毁重建

bluescurry commented 3 years ago

可以更狠一点，认为它永远不会改变。这样就可以用 react.memo 做出来性能非常好的组件。

如果它真的改变了，你是可以知道的，直接修改一下key，让组件销毁重建

我使用了 renderFormItem 属性，自建了一个 select 组件，通过 React.memo 优化了渲染次数。达到了预期效果~ 我理解这种 render 很耗性能的 column 可以通过自设renderFormItem 属性进行一些性能优化~