什么是复合组件？

介绍

我们将要讨论的第一个模式叫做 复合组件 模式。我知道这个名字听起来有点高大上，但我来一步步解释清楚。

这个模式名称中的关键词是“复合”（Compound）。

从字面上看，“复合”指的是由两个或更多独立部分组成的整体。

在 React 组件的语境下，这可以理解为一个组件由两个或更多独立的组件组合而成。

但这还远远不够。

实际上，任何 React 组件都可以由两个或更多组件构成。所以，仅仅这样描述并不能准确体现复合组件的本质。

真正的复合组件更进一步：组成主组件的各个独立子组件，必须依赖于父组件才能使用。

主组件通常被称为 父组件，而这些被组合进来的独立组件则称为 子组件。

示例：select

一个经典的例子是 HTML 的 select 元素。

1<select>
2  <option value="value0">key0</option>
3  <option value="value1">key1</option>
4  <option value="value2">key2</option>
5</select>

在这里，select 是父组件，option 是子组件。

这种结构就像一个复合组件：单独使用 <option>key0</option> 没有意义，必须包裹在 select 标签内才有效。同时，select 的整体行为也依赖于这些 option 子元素的存在。因此，它们之间是紧密关联的。

整个组件的状态由 select 管理，所有子组件都依赖于这个状态。

现在你是否对复合组件有了清晰的理解？

值得一提的是，复合组件只是表达组件 API 的多种方式之一。

例如，虽然效果差一些，select 也可以设计成这样：

1<select options="key:value;anotherKey:anotherValue"></select>

这种方式显然不是好的设计，因为它几乎无法向子组件传递属性。

快速小测验！