React 知命境第 44 篇，原创第 158 篇
我们在学习的时候遇到的 Demo 经常都是比较简单的，但是一旦到了实践工作中，数据和功能就开始变得复杂了。这个时候许多小伙伴就不知道咋处理了，他可能会把组件写的非常庞大。不利于维护
我们可以在 antd 中，学习一手最佳实践，如何把复杂的组件转化为简单的组件。
例如我们有这样一个复杂交互需求。这是一个树结构与输入框结合的交互逻辑 Input Tree
在 antd 中，这样的交互被封装成为了一个单独的子组件 TreeSelect。他的妙处就在于，当我们使用该组件时，不需要关注内部的复杂逻辑到底是如何处理的
我们只需要关心的问题有三个，第一，Input 和 Tree 结构需要的初始化数据
代码语言：javascript复制<TreeSelect
treeData={treeData}
defaultValue={}
placeholder="Please select"
/>
placeholder 表示没有任何选中数据时，Input 中的提示信息。可以在组件内部给一个通用默认值，这样在大多数情况就不需要显示的传入了
第二，Input 受控属性 value。
<TreeSelect
treeData={treeData}
value={}
/>
第三，当内部有操作变化，并且需要告知外部时，所需要执行的钩子函数 onChange
<TreeSelect
treeData={treeData}
onChange={}
/>
很多时候，我们并不需要受控属性
value。这是许多人在使用时可能会不太理解的地方。受控属性的目的是用于在父组件去控制TreeSelect的显示。但是其实我们可能只是需要从 onChange 中获取到当前选中的结果，然后将这个结果整合到接口参数中去提交表单。只有当TreeSelect中的交互结果，会影响到其他外部组件时，我们才会考虑使用受控组件。
因此，在使用时，我们需要考虑的是，利用 defaultValue 或者 value 去回显组件在初始化时的数据。
然后利用 onChange 获取得到最新的值即可。
这里比较有意思的是，当我们把目标关注到 Input 组件时，发现 Input 组件的核心属性也是这几个 defalutValue/value/onChange
而 tree 组件的核心属性，也是这几个 defalutValue/value/onChange
因此，我们可以基于这种思路，去封装复杂业务组件，让其使用起来变得非常简单。
例如，我们有一个配置项名为被选中的学员。在页面上我们使用一个列表来暂时选中结果列表。
在该结果展示列表中，可以删除项。
当需要重新选中时，需要点开一个弹窗，然后弹窗中有一个完整的人员分页列表。
大家可以脑补一下
我们可以把这一部分统一封装成一个 TreeSelect 那样的组件，命名为 PersonnelSelector，其中包括：展示结果的列表组件、弹窗组件、弹窗中的分页列表组件
对于内部而言，构成非常的复杂
但是对于外部而言，他的构成就非常简单，我们只需要通过 value/defaultValue 回显数据，并且通过 onChange 获取操作之后的最新选中值即可。
<PersonnelSelector
value={[{}, {}, {}]}
onChange={}
/>
PersonnelSelector 就是我们封装的业务组件
代码语言：javascript复制// 简化版代码
function PersonnelSelector() {
const [selected, setSelected] = useState([])
const [open, setOpen] = useState(false)
const {list} = usePagination(api)
return (
<>
<Table dataSource={selected} />
<Modal show={open}>
<Table dataSource={list} />
</Modal>
</>
)
}
总结
这是一种合理抽离子组件的方式，在复杂页面的交互中非常有用。把局部交互逻辑单独隔离到子组件中去，而不需要在父组件中去维护弹窗组件等逻辑的状态，从而让页面组件的代码保持简洁。
