优化antd的select组件

---

前言

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

---

一、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
    }
};

---

总结

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