如何解决antd Select下拉框因数据量过大导致的卡顿问题？

本文共计2075个文字，预计阅读时间需要9分钟。

相信用过antd的同学习惯使用select下拉框。数据量少时非常好用，但数据量大时，如几百至上千条，感觉就不太好用了。

相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。

当然这不是我想去优化它的动力，主要是公司业务人员和后端的同事也无法忍受，于是我只能屈从于他们的淫威。。。。

想要优化肯定要知道为什么会卡，初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿，于是想要不卡只能限制渲染的数据数量。

我的想法是这样的：任何时候都只渲染前100条数据以保证不卡顿，然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后当select框不下拉的时候也就是失焦的时候将数据回复原样。