这里我们一起来学习前端组件化的知识，而组件化在前端架构里面是最重要的一个部分。
讲到前端架构，其实前端架构中最热门的就有两个话题，一个就是组件化，另一个就是架构模式。组件化的概念是从开始研究如何扩展 HTML 标签开始的，最后延伸出来的一套前端架构体系。而它最重要的作用就是提高前端代码的复用性。
架构模式就是大家特别熟悉的 MVC, MVVM 等设计模式，这个话题主要关心的就是前端跟数据逻辑层之间的交互。
所以说，前端架构当中，组件化可以说是重中之重。在实际工程当中，其实组件化往往会比架构模式要更重要一些。因为组件化直接决定了一个前端团队代码的复用率，而一个好的组件化体系是可以帮助一个前端团队提升他们代码的复用率，从而也提升了团队的整体效率。
因为复用率提高了，大家重复编写的代码量就会降低，效率就会提高，从而团队中的成员的心理和心智负担就会少很多。
所以学习组件化可以是说是非常重要的
这里我们先从了解什么是组件化和一个组件的基本组成部分开始。
组件的基本概念组件都会区分为模块和对象，组件是与 UI 强相关的，所以某种意义上我们可以认为组件是特殊的模块或者是特殊的对象。
组件化既是对象也是模块
组件化的特点是可以使用树形结构来进行组合，并且有一定的模版化的配置能力。这个就是我们组件的一个基本概念。
对象与组件的区别首先我们来看对象，它有三大要素：
属性 —— Properties
方法 —— Methods
继承关系 —— Inherit
在 JavaScript 中的普通对象可以用它的属性，方法和继承关系来描述。而这里面的继承，在 JavaScript 中是使用原型继承的。
这里说的 “普通对象” 不包含复杂的函数对象或者是其他的特殊对象，而在 JavaScript 当中，属性和方法是一体的。
相对比组件，组件里面包含的语义要素会更丰富一点，组件中的要素有：
属性 —— Properties
方法 —— Methods
继承 —— Inherit
特性 —— Attribute
配置与状态 —— Config & State
事件 —— Event
生命周期 —— Lifecycle
子组件 —— Children
Properties 和 Attribute 在英语的含义中是有很大的区别的，但是往往都会翻译成 “属性”。 如果遇到两个单词都出现的时候，就会把 Attribute 翻译为 “特性”，把 Properties 翻译成 “属性”。这两个要素要怎么区分呢？这里在文章的后面会和大家一起详细了解。
接下来就是组件的 Config，它就是对组件的一种配置。我们经常会在一个构造函数创建一个对象的时候用到 Config ，我们传入这个构造函数的参数就叫 “Config（配置 ）”。
同时组件也会有 state（状态）。当用户去操作或者是一些方法被调用的时候，一个 state 就会发生变化。这种就是组件的状态，是会随着一些行为而改变的。而 state 和 properties、attributes、config 都有可能是相识或者相同的。
event 就是 “事件” 的意识，而一个事件是组件往外传递的。我们的组件主要是用来描述 UI 这样的东西，基本上它都会有这种事件来实现它的某种类型的交互。
每一个组件都会有生命周期 lifecycle，这个一会儿在文章的后面会详细的展开学习。
组件的 children 是非常重要的一部分，children 也是组件当中一个必要的条件，因为没有 children 组件就不可能形成树形结构，那么描述界面的能力就会差很多。
之前有一些比较流行的拖拽系统，我们可以把一些写好的 UI 组件拖到页面上，从而建立我们的系统界面。但是后面发现除了可以拖拽在某些区域之外，还需要一些自动排序，组件嵌套组件的功能需求。这个时候组件与组件之间没有树形结构就不好使了。
最后组件在对象的基础上添加了很多语义相关的概念，也是这样使得组件变成了一种非常适合描述 UI 的概念。
组件 Component我们用一张图来更深入的了解组件。
组件最直接产生变化的来源就是用户的输入和操作，比如说当一个用户在我们的选择框组件中选中了一个选项时，这个时候我们的状态 state，甚至是我们的子组件 children 都会发生变化。
图中右边的这几种情况就是组件的开发者与组件的关系。其中一种就是开发者使用了组件的标记代码 Markup Code，来对组件产生影响。其实，也就是开发者通过组件特性 Attribute 来更改组件的一些特征或者是特性。