介绍

在React世界上最有用，最广泛使用的概念之一是设计模式，因为它们有助于保持代码可扩展并为我们创建的组件提供添加的含义。

有多种模式，在本文中，我们将讨论

，这是一种高级模式，对于创建灵活且可合并的接口特别有用。 什么是复合组件？

复合组件是React中的高级模式。它的目标是通过在一组组件之间启用状态和逻辑的共享来创建更灵活的设计。这样，可以灵活地实现父组件和子组件之间的通信。

组件共同起作用，以实现某些行为，而无需创建复杂的道具树或过于复杂的逻辑，这将来很难重构或理解。

这种模式有助于消除道具钻探，在那里我们通过几个组件层传递了大量道具。道具钻探可能是有问题的，因为每次更新状态时可能会导致不必要的重新订阅者，因为每个状态更改都会更新所有儿童组件。

可以在选择和选项标签的HTML结构中看到化合物组件的示例：

[2

选择元素作为接口的状态管理器工作，而“选项元素”配置了选择组件应如何运行。

使用化合物组件的示例

在此示例中，我们将创建一个模态，该模态分为两个复合组件：切换和内容。他们将共享模式的开放/关闭状态。

让我们遍历如何逐步创建此组件：

我们可以从创建将管理模态的开放/关闭状态的上下文开始：

创建模态组件的基础：

[2

注意，我们正在使用孩子抓住将放置在模态内的组件。我们想这样使用它：

[2

现在我们需要创建切换组件，该切换组件将负责打开模式：

[2

我们还需要一个内容组件，该内容将负责显示模式的内容：

[2 最后，我们可以将两个组件添加到我们的模态组件中，并且可以使用！ ？

[2

用法：

[2

结果： [2

以这种方式，我们制作和使用模式非常灵活和重复使用。 modal.toggle负责触发模态显示，而模态应显示模态内容。

此结构允许开发人员根据其应用程序的特定需求轻松自定义模式的行为和内容，从而使代码清洁器和更有条理。

其他例子

我们还可以在其他上下文中使用复合组件，例如：

[2

菜单组件： [2

所有这些示例都是灵活和适应性的，使开发，可扩展性和组件用法更加容易。

锻炼

我们注意到关闭按钮放置在内容组件内，但是要有一个专门用于管理模态关闭的组件会很有趣。您可以创建 close 之类的东西。尝试尝试并添加此组件！ 结论

我们已经看到使用复合组件模式的编写组件如何在我们的应用程序中有用。我们还探索了如何实施它并审查了这种模式可以合适的示例。

随意探索和实验使用复合组件创建组件。明智地使用它并评估在您的上下文中应用是否有意义，就好像不是很好地实施，它最终可能更像是一种障碍，而不是帮助。

注意：我在react4noobs上发布了相同的内容，这是一个BR存储库，将React Universe中的开发人员创建的文章汇总在一起。值得检查！