对于组件的复用性，老大给出了6个层次的感悟，一起来看看吧！

我们都想写更少的代码，完成更多的工作。为实现这一点，我们构建组件以便它们可以被多次重用。有些组件只需要基本的可重用性，而另一些组件则需要更复杂的重构技术才能完全重用。这里有6个不同级别的可重用性概念。先体验一下吧，在后续的更新中我们会一一说到。1.模板使用模板，我们将一些高度重复的代码包装在它自己的组件中，而不是到处复制和粘贴代码。当我们重用那个组件（而不是直接使用代码）时，它给我们带来了两个好处：以后进行更改要容易得多，因为我们只需要更改一个地方，而不必记住每个地方重复的代码被调用在哪里复制？这是最基本也是最常谈论的可重用性形式。2.可配置对于一些组件，我们需要根据需求修改它们的工作方式。例如，Button组件默认有主版本和图标版本。但是我们不是为每个版本创建一个全新的组件，而是指定props以在不同类型之间切换。添加这些props通常不会给组件增加很多复杂度，同时也能给我们带来更多的使用组件的灵活性。注意：这不同于使用props来保存状态或数据，例如加载props或禁用props。3、自适应配置最大的问题是缺乏前瞻性。我们需要预见未来的需求，并通过放置相应的道具将其构建到组件中。但是，如果您的组件具有足够的适应性，您可以在不更改它们的情况下处理未来的需求。为了使我们的组件具有足够的适应性，我们可以使用插槽来做到这一点。例如，我们可以使用默认槽而不是传递给Button组件的文本：现在我们不局限于传入的类型是字符串还是数字。如果我们想在不修改Button组件的情况下添加加载，我们可以这样做：4.可逆性除了通过插槽将完整的标记块传递给我们的子组件外，我们还可以传递一组关于如何渲染的指令。这就像我们根据食谱做饭而不是叫外卖。当我们按照食谱来做的时候，需要做更多的工作，但是我们可以按照自己的节奏去做，可以随时进行调整，也可以完全放弃非食谱的过程。我们使用scopedslots来为我们的组件增加更多的灵活性。5.可扩展性通过适应性和可逆性，我们有一些必要的技术基础，这些技能可以最大限度地提高组件的可重用性。下一步是将这些技术应用于整个组件，以便我们可以更轻松地扩展其行为。我们使用命名插槽在组件中添加一个或多个扩展点。仅适应性和反转就为我们提供了扩展行为的一种选择，而拥有多个扩展点则为我们提供了许多不同的选择。在这里，我们有一个包含页眉、默认和页脚的模态组件：这是一个相当简单的扩展例如，我们已经有几个扩展此组件的选项：只需覆盖默认插槽即可添加我们的内容您可以通过插槽名称覆盖页眉的内容您可以通过插槽名称覆盖页脚的内容，其内容仍然是具有不同样式的插槽buttons作为主要的header和footer，更多的是为了自定义这个组件的行为，你不必去扩展它，但是你也可以扩展它的一部分。无论哪种方式，我们都获得了很大的灵活性和大量的代码重用。6.嵌套在扩展之上更高级的复用性是嵌套，我们可以基于多个基本组件，一次嵌套一层，乍一听可能很疯狂，但它非常有用，尤其是在大中型应用程序中。我们从一个pass基础组件开始，它在功能上相当通用。下一个组件更具体，以多种方式扩展基本组件。然后从前面的基本组件继续扩展，直到我们拥有完成实际工作的最终组件。这类似于我们从非常一般的动物(Animal)到更具体的哺乳动物(Mammal)，然后是狗(Dog)，最后停在贵宾犬(Poodle)的方式。如果我们只需要Poodle组件，那么我们似乎是在浪费时间处理这些基本组件。但是在大规模应用中就不一样了。我们需要对同一个基本概念进行多次修改，以满足不同的个性化需求。这时候用基础组件嵌套的思路就很重要了。我们可以扩展Dog组件以获取Corgi和Beagle组件。或者扩展Mammal组件以获得Cat组件，这将添加Tiger和Lion组件。总结以上是6个可重用性级别的概述。当然，很可能会遗漏一些内容，但基本上可以为我们提供一个封装组件的大概思路，也是一个很好的方式。达人的【三通】是小智继续分享的最大动力。本博客如有错误或建议，欢迎达人留言。最后谢谢大家的观看。作者：MichaelThiessen译者：前端小智来源：news原文：https://news.knowledia.com/US/en/the-6-levels-of-reusability-7ad7fc58842eb67fc320c8e11305e1010a11f251?source=rss微信公众号》"，您可以通过以下二维码关注。转载请联系大千世界公众号。