大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说antd-virtual-select 万条数据流畅滚动渲染[通俗易懂],希望您对编程的造诣更进一步.
功能简介
antd 的 Select 组件不支持大数据量的下拉列表渲染，下拉列表数量太多会出现性能问题.
antd-virtual-select 基于 antd 封装实现，替换原组件下拉列表，只渲染几十条列表数据，随下拉列表滚动动态刷新可视区列表状态，实现万条以上大数据量列表高性能渲染。基于 antd Select 组件，不修改组件用法。
- 实现方案
- 使用 antd Select
dropdownRender方法自定义原组件下拉列表部分 - 虚拟滚动渲染，只渲染可视区列表，滚动动态加载其他列表
- 对自定义列表项绑定原 Select 组件的各项方法和回调函数支持
- 同步使用 antd 组件下拉列表样式
- 同 antd select api
- 使用 antd Select
在线地址
代码仓库
目前社区下拉列表实现方案多种多样，也都有不完美的地方 ，更多可见 antd 长列表渲染性能问题讨论 issue 3789
antd 4.0 select 组件原生支持虚拟列表渲染，所以 4.0 以后这也不是问题了，但需要兼容 ie9 只好自己动手了。。。
使用示例
基本使用同 antd Select，只是使用 SuperSelect 代替 Select
import SuperSelect from 'antd-virtual-select';
import { Select } from 'antd';
const Option = Select.Option;
const Example = () => {
const children = [];
for (let i = 0; i < 100000; i++) {
children.push(
<Option value={i + ''} key={i}>
{i}
</Option>
);
}
return (
<SuperSelect
showSearch
// mode="multiple"
// onChange={onChange}
// onSearch={onSearch}
// onSelect={onSelect}
>
{children}
</SuperSelect>
);
};
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13063.html
