什么是属性集合模式？

组件使用中的共性

无论你构建的是什么组件，也无论谁在使用它，总有一些东西对所有用户来说是相同的。

我们如何知道这一点呢？

不妨考虑一下我们精心打造的 Expandable 组件。

不管用户选择哪种 UI 实现方式，他们始终都需要为“切换元素”提供一个 onClick 处理函数。

1const { toggle, expanded } = useExpanded()
2// 用户 1
3<button onClick={toggle}>点击查看精彩内容...</button>
4// 用户 2
5<div onClick={toggle}>烧掉这个地方 🔥</div>
6// 用户 3
7<img onClick={toggle} alt="轮播图第一张图片" />

你明白意思了。

不管用户选择渲染什么元素，每个用户仍然需要处理 onClick 回调。

如果这些用户关心无障碍访问（accessibility），他们还会这样做：

1const { toggle, expanded } = useExpanded()
2// 用户 1
3<button onClick={toggle} aria-expanded={expanded}>点击查看精彩内容...</button>
4// 用户 2
5<div onClick={toggle} aria-expanded={expanded}>烧掉这个地方 🔥</div>
6// 用户 3
7<img onClick={toggle} aria-expanded={expanded} alt="轮播图第一张图片" />

现在，这就涉及两个属性。

根据你的使用场景，可能还会有更多与可复用钩子或组件相关的“通用属性”。

有没有办法让使用者不必每次都手动编写这些属性？能否从你的可复用自定义钩子或组件中暴露某种 API？

这些问题正是“属性集合模式”所要回答的，答案是肯定的！

属性集合 是指与自定义钩子或组件相关联的一组“通用属性”。

快速小测验！

---

在下一课中，我们将实际演示这一模式！