基于Go语言K8s+gRPC实战云原生微服务开发-江山如画，一时多少豪杰

优秀组件设计的关键：自私准绳"

基于Go语言K8s+gRPC实战云原生微服务开发

download：https://www.51xuebc.com/thread-539-1-1.html

当把组件从设计转化为开发时，常常会发现一些属性与内容有关，而与组件自身无关。这种思索周到的组件设计办法招致了复杂的属性、更峻峭的学习曲线和最终的技术债务。但是，防止这些圈套的关键是自私或自我利益为中心的组件设计。

在开发新功用时，是什么决议了现有组件能否可行？当一个组件不能运用时，这终究意味着什么？

该组件在功用上能否没有做它所希冀的事情，比方一个标签系统没有切换到正确的面板？或者它太板滞，不能支持设计的内容，比方一个在内容之后而不是之前有图标的按钮？或者是它太过预设和构造化，无法支持细微的变体，比方一个不断有标题局部的模态，如今需求一个没有标题的变体？

这就是组件的生活。很多时分，它们是为了一个狭窄的目的而构建的，然后匆忙地为一个接一个的小变化停止扩展，直到不再可行。在这个时分，会创立一个新组件，技术债务增长，入职学习曲线变得更峻峭，代码库的可维护性变得更具应战性。

这仅仅是组件不可防止的生命周期吗？还是这种状况能够防止？最重要的是，假如能够防止，怎样做？

自私。或者说，自利。更好的说法可能是两者兼而有之。

很多时分，组件过于体恤。它们对彼此太体恤了，特别是对它们本人的内容太体恤了。为了创立可以随着产品扩展的组件，关键是自私地关注本人的利益——冷漠、自恋、世界环绕着我旋转的自私。

本文并不打算处理自利和自私之间几百年的争论。坦白说，我没有资历参与任何哲学争辩。但是，本文要做的是证明构建自私组件对其他组件、设计师、开发者和运用你内容的人来说是最有利的。事实上，自私的组件在它们四周发明了如此多的益处，以致于你简直能够说它们是无私的。

留意：本文中的一切代码示例和演示都将基于React和TypeScript。但是，这些概念和形式是与框架无关的。

思索的迭代

或许，展现一个体恤的组件的最好方式是经过走过一个组件的生命周期。我们将可以看到它们是如何开端时很小，功用很强，但一旦设计开展起来就会变得很笨重。每一次迭代都会使组件进一步堕入窘境，直到产品的设计和需求超越了组件自身的才能。

让我们思索一下谦逊的Button组件。它具有诈骗性的复杂性，而且经常被困在思索形式中，因而，是一个很好的工作实例。

迭代1

固然这些样本设计相当粗陋，比方没有显现各种:hover、:focus和 :disabled状态，但它们的确展现了一个有两种颜色主题的简单按钮。

乍一看，所产生的Button组件有可能和设计一样是赤裸裸的。

// 首先，从React扩展原生HTML按钮属性，如onClick和disabled。 type ButtonProps = React.ComponentPropsWithoutRef<"button"> & { text: string; theme: 'primary' | 'secondary'; } <Button onClick={someFunction} text="Add to cart" theme="primary" />

有可能，以至有可能，我们都见过这样的一个Button组件。或许我们以至本人也做过这样的一个。有些名字可能不一样，但 props 或Button的API大致上是一样的。

为了满足设计的请求，Button 为 theme 和 text 定义了 props 。这第一个迭代工作，满足了设计和产品的当前需求。

但是，设计和产品的当前需求很少是最终需求。当下次设计迭代时，添加到购物车的按钮如今需求一个图标。

迭代2

在考证了产品的用户界面后，决议在添加到购物车的按钮上增加一个图标，这将是有益的。不过，设计人员解释说，不是每个按钮都会包括一个图标。

回到我们的Button组件，它的 props 能够用一个可选的 icon 来扩展，该 props 映射到一个图标的称号，以便有条件地渲染。

type ButtonProps = { theme: 'primary' | 'secondary'; text: string; icon?: 'cart' | '...all-other-potential-icon-names'; }<Button theme="primary" onClick={someFunction} text="Add to cart" icon="cart" />

呜呼!危机解除了。

有了新的 icon prop，Button 如今能够支持带或不带图标的变体。当然，这假定图标总是显现在文本的末尾，但出人意料的是，在设计下一次迭代时，状况并非如此。

总结

本文对组件设计中的一个重要概念——自私性停止了讨论。自私性（Selfishness）在组件设计中是一种思想方式，意味着每个组件只关怀其本身的功用和款式，而不关怀其他组件。该文章以为，自私性能够协助开发者创立更高效、易于维护的组件。

文章论述了以下四个理论自私性的办法：

单一职责准绳：组件应该有一个明白的功用，并仅关注该功用。这使组件更容易了解、测试和复用。

防止外部依赖：组件应该减少对外部资源的依赖，这有助于进步组件的独立性和复用性。

封装款式：组件的款式应该内部定义，防止遭到外部款式影响。这样做能够确保组件在不同的环境中坚持分歧性。

明白接口：组件应该具有明晰、明白的接口，以便其他开发者可以容易地理解和运用组件。

作者强调，自私性并不意味着开发者应该孤立地工作，而是鼓舞他们关注组件自身，从而进步组件的质量。经过遵照上述准绳，开发者能够创立愈加强健、可维护和可扩展的组件，为整个项目带来久远的益处。