编码概念 - 智能组件与哑组件

智能组件

哑组件

相互作用

目的

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

随着 JavaScript 框架逐渐主导前端开发领域，了解三大主流框架所倡导的一些关键原则至关重要。构建 Web 应用程序时，您需要构建组件间的通信架构。

大多数人都知道，为了遵循SOLID 原则，应该使用不同的组件，避免应用程序中的重复代码，并使变更和新增功能能够更快、更轻松地集成到现有解决方案中。这些组件的实际创建和交互可以通过多种方式进行分离，但对我来说最简单的方法是将它们分为智能组件和哑组件。

智能组件

包含特定于应用程序的依赖项。服务在这些容器的构造函数中注入。

也称为 控制器 组件或 容器 组件，它们可以：

• 处理数据
• 调用外部资源（库、API）
• 管理状态

从本质上讲，这些可以被视为实现用户特定任务的容器、页面或部分。

哑组件

接收数据并显示信息。

也称为 演示 组件或 纯 组件，它们可以：

• 允许传入数据
• 以特定格式和样式显示数据

你可以把这里理解为创建最终的 HTML 和 CSS 代码的地方，这些代码决定了屏幕上的显示效果。在这里，你可以设置应用程序的样式并与用户交互。

相互作用

智能组件内部会包含一个或多个非智能组件。智能组件会将它们接收到的数据传递给这些展示组件，然后由展示组件根据需要渲染数据。

如果智能组件和普通组件之间需要进行任何交互，则会向智能组件触发一个事件进行处理。

目的

那么，为什么我们需要这样划分应用程序呢？嗯，就像任何形式的编程一样，遵循特定的范式或方法并不是应用程序运行的必要条件，但通常会在以后带来许多好处。

代码重用性 一直被认为是大多数编程方法的一大优势。遵循 DRY（不要重复自己）原则意味着您可以快速有效地将相同的功能添加到不同的领域。

重构 应用程序的部分或全部内容只需要在较少的地方进行更改。

可读性： 阅读组件名称比剖析大量的 HTML 代码更容易了解其功能！

运行测试 最后但同样重要的是，测试较小的独立组件可以更轻松地创建和管理测试套件。

无论你如何描述，将应用程序的功能分别放在这两种类型的组件中，都应该能让所有参与其中的人在 React、Vue 或 Angular 中创建 Web 应用程序的过程变得更加轻松愉快。

如果您有不同的看法，就像丹·阿布拉莫夫最近所做的那样，请随时在下方分享您的意见。