优化antd的select组件

Nancyeah

已于 2023-05-08 14:05:43 修改

阅读量883

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript react.js typescript

于 2023-05-08 11:36:30 首次发布

本文链接：https://blog.csdn.net/Nancyeah/article/details/130554323

文章讲述了如何通过调整antdSelect组件的API使用，如利用dropdownRender和onDropdownVisibleChange，来改变请求时机，避免页面加载时多个请求导致的卡顿问题。通过在点击展开选择框时才加载下拉内容，实现了性能优化并提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

因需求设计，进入某详情页时可能会出现多个选择框，而选择框的下拉内容是请求接口返回的，导致一进入页面就开始多个请求，体验并不好，页面也可能卡顿，故修改请求时机在点击展开选择框时再去加载下拉内容。

一、antd的select组件api

发现options（数据化配置选项内容），是这样的一个数组对象：[{ label, value }]
发现dropdownRender（自定义下拉框内容），参数是它原来的下拉内容
发现onDropdownVisibleChange（展开下拉菜单的回调），参数是open（是否展开下拉菜单）

二、代码实践

<Select
	options={valueList.map((v) => ({ value: v, label: v }))}
	onDropdownVisibleChange={onDropdownVisibleChange}
	dropdownRender={(menu) =>
		loading ? ( // loading是请求中的加载展示
			<Row align="middle" justify="center">
				Spin size="small" />
			</Row>
        ) : (
          <>{menu}</>
        )
  	}
/>

const onDropdownVisibleChange = (open: boolean) => {
	if (open) {
		onLoadDistinctValue(); // 请求方法，里面包含setValueList
    }
};

总结

这样修改后请求时机就不再是一进入页面就开始，而是在点击展开选择框时再去加载。其实代码并不复杂，但是就是这么一个小小的优化，能够使得页面加载速度变快且提升用户体验，表明我们日常开发也需要多动脑筋，不是一味地完成需求就好。