抽象user-select组件时候会过度封装
来源：9-2 抽象user-select组件选择用户
Bokk
2021-02-02
Nolan老师你好，
我想问问就user-select组件本身来说，使用抽象UserSelect组件会不会有点过度封装?
第一，如果直接使用IdSelect，可以使用父组件传过来的user，不需要在UserSelect组件下call useUsers发送http请求
第二，search-panel组件下代码并没有因为封装减少很多
封装前
<Form.Item>
<IdSelect
defaultOptionName={'负责人'}
value={param.personId}
onChange={value =>
setParam({
...param,
personId: value
})}
options={users || []}
/>
</Form.Item>
封装后
<Form.Item>
<UserSelect
defaultOptionName={"负责人"}
value={param.personId}
onChange={(value) =>
setParam({
personId: value,
})
}
/>
</Form.Item>
写回答
1回答
-
你好，你说的是对的，这个user-select主要就是封装的获取users的过程。关于获取users额外的http请求，我们会在下周的 全局状态管理 这一章，用 react-query '阻塞请求' 的特性来解决，这样就不会有额外的 users http请求。
这个user-select并不只会在search-panel中使用，还会在其他地方使用，每次使用的时候我们就不需要关心users获取的过程了，只是把组件放在那里就可以，其实是节省了代码和获取users的脑力的。而且这个UserSelect加上空行一共只有8行，所以成本也不算高。
112021-02-02
相似问题