前言：
在我们正式学习vue和react之前，最应该理解的一个概念就是组件的概念，所以在我学会vue和react的工程搭建后就立马来学习组件的思想了，接下来就为大家分享一下。
组件思想 VS 传统思想：
每一个新事物的出现都是有它存在的原因的，而组件思想的出现也一定是为了解决一定问题才诞生的，所以我们不妨来分析一下传统开发的问题。
传统开发问题：
开发单元过大
在我们传统的前端开发中，我们是以页面为单位来进行开发的，要么不要这个页面，要么就是需要写一个完整的页面。但是一个页面中的内容是庞大、复杂的，甚至单单开发这个页面中的一个区域来说都是极其复杂的，而我们每次都需要将一整个页面来进行开发，这样就会导致开发单位太大，从而导致复杂度直线上升。就可能导致我们可能只是开发几个简单的页面就让代码量指数翻倍。
重复区域过多，难以分隔
在传统开发中处理代码中我们需要经常处理相同的js、css、html，因为在一个页面中可能存在多个相同功能的部分，例如：
这张图片是我 Microsoft Edge浏览器的默认页面，红框内就是一个经典的幻灯片（Slide）组件，但是有可能我们这个页面不单单只需要一个幻灯片，在传统开发中我们就需要为每个幻灯片实例创建独立的HTML结构，并确保它们有唯一的标识符等等操作，这样就可能导致我们代码内容复杂且繁琐。
组件解决问题：
在了解了传统开发的问题点后，我们就可以来了解一下组件是怎么解决这些问题的。
什么是组件：
总的来说，组件其实就是从UI中抽离出来的一块区域。例如：
假设我们需要开发上面这个页面，那么我们就可以将其视为一个完整的组件，即根组件（<Root>）。
而在这个组件中包含例如我们的头部<Header>，主区域<Main>，侧边栏<Aside>这三个区域，我们将其抽离出来又形成三个组件。
而在主区域中包含两块区域，假如是用来展示文章的，我们就可以视为在<Main>组件中又包含两个子组件<Article>，同理在侧边栏<Aside>中包含三个子组件<Card>。
这样我们是不是就将一个页面组件化了，并且其也与传统的DOM一样会组建成一个组件树。
就会形成类似于这样的代码结构：
而且我们发现在<Main>和<Aside>组件中几个子组件的功能是相同的，所以我们只需要写一份子组件然后使用多次。
组件的意义：
在我们直观了解了一下组件后，就会对组件的意义产生一个模糊的认知，那么我们就来总结一下其意义：
- 降低了开发粒度（页面 --> 组件），使得总体复杂度降低。
- 减少重复代码，相同组件可以复用。
---欢迎各位点赞、收藏、关注，如果觉得有收获或者需要改进的地方，希望评论在下方，不定期更新
