为什么在 Vue.js 或 React 中使用组件？ [关闭]答案

【问题标题】：Why use components in Vue.js or React? [closed]为什么在 Vue.js 或 React 中使用组件？ [关闭]
【发布时间】：2018-01-19 05:57:58
【问题描述】：

所以在试用了 Vue.js 一段时间后，我开始思考……为什么我们必须使用组件？我不明白它们背后的炒作，因为我可以只使用一个 for 循环并创建一个 div 并获得与使用组件完全相同的输出。

Vue.js 的文档甚至说：

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

但同样，它似乎可以用组件给你的 for 循环来完成。

React 也是如此。

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

谢谢。

【问题讨论】：

这里的关键词是reusable。生成 div 的 for 循环只能通过复制/粘贴来重用（除非你将它们分成模块，然后你开始重新发明 vue 或做出反应）
en.wikipedia.org/wiki/Don%27t_repeat_yourself
我的意思是，您的问题的答案是“因为它们很有用”。每个人都可以有自己的孤立状态。组件代码可以异步加载。事件可以轻松管理。代码更容易测试。它们可以在站点的其他部分重复使用。这份清单可能会一直持续下去。
更容易调试/重用/维护是一个很好的解释
我不认为 for 循环是 wrapper component 的可行替代品。

【解决方案1】：

在 Vue.js 或 React 中不使用组件就像对所有事情都使用锤子。您显然可以尝试用锤子敲钉子，但并不是每个人都能理解您为什么，因为您可以使用 divs 而不是 CustomXComponent 来实现每个 GUI 元素。

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

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

【讨论】：

【解决方案2】：

出于同样的原因，您希望使用 for 循环而不是复制和粘贴相同的东西 N 次 - 用户的最终结果是相同的，但您的代码会更难理解，维护和更新。

【讨论】：

【解决方案3】：

组件非常有用，因为它们旨在用于比少数div 更复杂的上下文。

例如，假设您需要在页面中添加日历以及大数据表、大表单、对话框和其他 UI 元素。它确实可行没有组件，但如果你将代码拆分成组件，它会更容易维护和更易读。

【讨论】：