Javascript 为什么要在Vue.js或React中使用组件？

所以在试用了一段时间Vue.js之后，我开始思考…为什么我们必须使用组件？我不理解他们背后的炒作，因为我可以只做一个for循环，创建一个div，然后得到完全相同的输出，就像我在使用组件一样

Vue.js的文档甚至说：

组件是Vue最强大的功能之一。它们帮助您扩展基本HTML元素，以封装可重用代码

但同样，似乎可以使用组件提供的for循环来完成

React也是如此

如果有人能更好地解释，我洗耳恭听

---

谢谢。

在Vue.js或React中不使用组件就像在任何事情上都使用锤子一样。显然，您可以尝试用锤子钉一颗螺丝钉，但不是每个人都会理解您的原因，因为您可以使用

divs

而不是CustomXComponent来实现每个GUI元素

使用组件就像用螺丝刀拧东西一样。它们的名称和形状不仅与您想要实现的目标一致，而且更快。不使用它可能看起来像是一种不专业的行为，只是没有为正确的事情适应正确的工具

---

如果您查看一堆

div

，您必须进一步查看它们的功能。如果我给你一个名为

AutoCompleteSearch

的自定义组件，你可以抽象出它在做什么，即使它是使用普通的

divs实现的，原因与你想使用For循环而不是复制和粘贴相同的东西N次相同-最终给用户的结果是相同的，但是，您可能会遇到更难理解、维护和更新的代码。
组件非常有用，因为它们要在比少数
div
复杂得多的上下文中使用

例如，想象一下，如果您需要向页面添加一个日历以及一个大数据表、一个大表单、对话框和其他UI元素。如果不使用组件，这当然是可行的，但是如果将代码拆分为组件，那么维护起来会更容易，可读性也会更高。
这里的关键词是可重用的。对于生成div的循环，只有通过复制/粘贴才能重用（除非您将它们分离为模块，然后开始重新发明vue或react），我的意思是，您的问题的答案是“因为它们很有用”。每一个都可以有自己的、孤立的状态。组件代码可以异步加载。事件可以很容易地管理。代码更容易测试。它们可以在站点的其他部分重复使用。这个列表可能会继续下去，继续下去，继续下去，继续下去，继续下去。更容易调试/重用/维护是一个很好的解释。我不认为for循环是a的可行替代品。不使用组件就像每次需要钉另一个螺钉时锻造一个新锤子；）