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

Question

所以在尝试了Vue.js一段时间后，它让我思考......为什么我们必须使用组件？我不明白他们背后的炒作，因为我可以采取一个for循环并创建一个div并得到完全相同的输出，就像我使用组件一样。

Vue.js的文档甚至说：

  

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

但是，似乎可以通过for循环来完成组件提供给你的东西。

同样适用于React。

如果有人能够更好地解释它，我会全力以赴。

感谢。

Answer 1

不使用Vue.js中的组件或React就像使用锤子一样。显然你可以尝试用锤子钉一个螺丝钉，但并不是每个人都能理解为什么，因为你可以使用divs代替CustomXComponent来实现每个GUI元素。

使用组件就像用螺丝刀拧螺丝。不仅他们的名字和形状与你想要达到的东西是一致的，而且他们这样做更快。不使用它可能看起来像一个不专业的行为，只是没有适应正确的工具，正确的事情。

如果你看一堆divs，你必须进一步了解他们的工作。如果我给你一个名为AutoCompleteSearch的自定义组件，你可以抽象它正在做什么，即使它是使用普通divs实现的。

Answer 2

出于同样的原因，你想要使用for循环而不是复制并粘贴相同的东西N次 - 对用户的最终结果是相同的，但是你有代码是＆＃39; s更难以理解，维护和更新。

Answer 3

组件非常有用，因为它们的使用范围要比少数div复杂得多。

例如，想象一下，如果您需要向页面添加日历以及大型数据表，大型表单，对话框和其他UI元素。肯定是 doable 没有组件，但如果将代码拆分为组件，它将更容易维护和更易读。