treeselect 多选 值回显_高性能多级多选级联组件开发

本文转载于SegmentFault社区

作者：离尘不理人

---

最近在项目开发过程中，有个一个多级多选的公共组件开发需求，特在这里记录下开发过程中所做的一些优化以及分享一下我是如何从零开发并设计一个组件的思路，希望给阅读这篇文章的读者带来一点收获。

效果预览

---

单个项选中

多个部分项选中

需求分析

---

在拿到需求之后，我们首先要做的是需求分析；通过上面的效果预览我们可以初步知道我们所需要处理的核心逻辑：

1. 默认加载第一层级数据
2. 鼠标 hover
   1. 异步获取数据
   2. 切换下级渲染数据
3. 鼠标点击
   1. 点击当前项状态改变：选中 or 未选中
   2. 当前项的父级状态改变：选中、半选、不选中，并且需要递归处理
   3. 当前项的子级状态改变：全选、全不选

组件设计

---

在设计组件之前，我们需要考虑组件的性能、通用型等问题；如何设计一个与业务解耦的组件，是我们需要首先考虑的问题；那么，如何将组件数据请求与业务解耦呢：

• 组件提供一个 service 入参，service 是一个返回 Promise 的异步请求方法
• 组件提供一个 dataMapper，用来做数据转换，将 service 请求返回的值转化为符合我们组件数据解构的数据
• 组件内部通过调用外部传入的 service 来获取数据

入参设计如下：

interface Props {
       ...  // 外部传入服务  service: (args: { parentId: string }) => Promise;  dataMapper?: (args: any) => { list: SelectorItemType[] };  /**   * 回显数据   * @default []   */  data?: SelectorItemType[];  onSubmit?: SubmitCallback;  onCancel?: () => void;}try {
       const data = await service({ parentId: itemId });  nextColumnList = dataMapper ? dataMapper(data).list : data.list;} catch (error) {
       Notification.error(error);  nextColumnList = [];}

整体思路设计

---

通过上面的 UI 呈现，现在大家应该有个基础的认识，我们需要做什么样的需求了。 我们在接到一个需求的时候，先不要着急着码代码，