#编写良好的前端组件
Vue 和 React 的大红大火，带来的是新的开发方式 — 组件化和数据驱动
随着webpack等构建工具的完善，前端代码具备了后端编程语言的代码组织能力，故，作为前端也该对自己的代码有更高的要求。
#组件职责划分
一个组件只做一件事，基于功能做好职责划分。
#组件的分类
无状态组件、端对端组件、UI组件、业务组件、容器组件
#组件设计原则
##尽可能的减少状态
- 如果一个数据可以由另一个 state 变换得到，那么这个数据就不是一个 state。只需要写一个变换的处理函数，在 Vue 中可以使用计算属性。
- 不要重复自己。如果你的 state 是一个数组，而模版最外层是渲染这个数组，那么你需要做的事是把渲染的项作为一个组件，只接受一个单级对象形式的数据，由外部决定这个组件的展示次数。
- 如果一个数据是固定的，不会变化的常量，那么这个数据就如同 HTML 固定的站点标题一样，写死或作为全局配置属性等，不属于 state。
- 如果一个数据需要从外部得到，它应该属于 props。
- 如果组件和兄弟组件拥有相同的 state，那么这个 state 应该放到更高的层级中，使用 props 传递到两个组件中。
##合理的依赖关系
- 父组件不依赖子组件。要做到当我们把子组件删除后，只是丢失了一个功能，或一个模块等，而不会造成父组件及兄弟组件功能异常。
- 子组件基于父组件传递 props 作出个性化展示。
##扁平化参数
像 HTML 原生元素那样，只接受原始类型（字符串、数值、布尔值和函数）作为属性，避免复杂的对象。当然，数据除外。
##良好的接口设计
- 把组件内部可以完成的工作做到极致。虽然提倡拥抱变化，但接口不是越多越好。
- 如果常量变为 props 能应对更多的场景，那么就可以作为 props。原有的常量可作为默认值。
- 如果组件不能提供调用者所需求的功能，那么这个组件的接口还不够完善。
- 如果需要为了某一调用者编写大量特定需求的代码，那么可以考虑通过扩展等方式构建一个新的组件。
- 保证组件的属性和事件足够的给大多数的组件使用。