智能组件与哑组件 - 统一样式

Question

我正在审查 Smart vs. Dumb Components 的概念，总的来说，我认为这是一个很好的设计原则。但是样式方面给我带来了一些明显的问题 - 校长建议智能组件不提供任何样式，但如果严格遵守这一点，只有哑组件提供样式，应用程序 look em> 不相交/不均匀？该指南对全局样式表有任何发言权吗？

Answer 1

考虑一下与样式和样式表无关的智能组件和愚蠢组件可能会有所帮助，尽管您阅读的解释是这样解释的。仅就 HTML 和 javascript 而言（无 CSS）考虑智能组件和愚蠢组件。

现在，您的哑组件应该只包含足够的 javascript/react 代码才能在您的应用中运行。哑组件的single responsibility 用于控制组件的HTML 组合或呈现。这就是为什么有些人称它为presentation component。

为了继续保持简单：您的智能组件应该执行与该特定组件相关的所有其他事情，以及该组件的特定职责，这与该组件的实际 HTML 无关。这包括以下内容：

• 将状态映射到表示组件的属性
• 将动作调度程序映射到表示组件的属性
• 创建任何自定义状态、事件处理程序或其他垃圾。
• 让组件做出适当响应和交互所需的其他业务逻辑
• 需要任何其他代码来确保将正确的“viewModel”或有限的属性集传递给演示组件，以便该演示组件正确显示和运行。

总而言之，我们应该在一个文件（智能组件）中包含业务逻辑，该文件生成单个对象（props），该对象（props）被传递给对应的 HTML 模板（哑组件），以呈现功能齐全的组件。

智能组件 -- 为各种事物和事物做事。生成一个 viewmodel/props 对象并将其传递给哑组件。

哑组件 -- 使用从智能组件传递的对象渲染 html。

这不是唯一的方式，只是我一直在思考事情的方式。希望对你有帮助！