react/vue 组件设计方法/原则

一、组件库的价值

/> 就个人而言，拥有一套自己的组件库，可以让你的开发变得更高效，让你在行业里更有价值。
/> 就团队而言，拥有一套团队的组件库，可以让协同开发变得更高效规范，让你的团队在公司更具有影响力。
/> 就公司而言，拥有一套公司维护的开源组件库，可以让你的公司在行业里更具有影响力。

对vue组件的设计原则的理解

• 容错处理, 这个要做好, 极端场景要考虑到, 不能我传错了一个参数你就原地爆炸
• 缺省值(默认值)要有, 一般把应用较多的设为缺省值
• 颗粒化, 把组件拆分出来.
• 一切皆可配置, 如有必要, 组件里面使用中文标点符号, 还是英文的标点符号, 都要考虑到
• 有详细的文档/注释和变更历史, 能查到来龙去脉, 新版本加了什么功能是因为什么
• 组件名称, 参数prop, emit, 名称设计要通俗易懂, 最好能做到代码即注释这种程度
• 规范化,我这个input组件, 叫on-change, 我另外一个select组件叫change, 信不信老子捶死你

二、哪些情况需要整合一套组件库

• 从业务上看，当业务达到一定规模后，很多地方需要复用
• 从设计上看，产品要遵循一定的设计规范来保持统一性
• 从开发上看，对开发效率要求高，需要快速迭代和响应开发需求
• 从维护上看，需要统一代码管理，需要达到更改一处全局响应的高可维护性

三、组件设计应遵循什么原则

-/> 就近管理

• 1 单文件开发
• 2 依赖的静态资源放在同级目录
• 3 相关联组件也放在同级目录
  -/> 高复用性
• 1 页面级别的复用（基础组件）
• 2 项目级别的复用- 私有组件库（业务组件）
• 3 公司级别的复用- 开源组件库（element-ui、iview）

react设计原理

单功能原则

使用React的时候，组件或容器的代码在根本上必须只负责一块UI的功能。
我们不要定义一个具有许多功能的组件，这会导致组件的复杂性和难以维护，难以复用。
一个比较合格的组件尽量保证在200行代码内完成。

单一数据源原则

在分析一个组件内部数据的流动时，我们必须明确数据的来源和去向，以及相应的状态
我们不允许一个数据的存在多个来源。就如上面反模式中使用 prop 初始化组件状态一样，我们不允许组件内部的状态来源于props然后又受组件内部setState的控制。
尽量保持：

1. 组件单方面接收props的变量，但不改变它；
2. 组件内部维护state变量，外部组件不改变它。

展示组件	容器组件
关注事物的展示	关注事物如何工作
可能包含展示和容器组件，并且一般会有DOM标签和css样式	可能包含展示和容器组件，并且不会有DOM标签和css样式
常常允许通过this.props.children传递	提供数据和行为给容器组件或者展示组件
对第三方没有任何依赖，比如store 或者 flux action	调用flux action 并且提供他们的回调给展示组件
不要指定数据如何加载和变化	作为数据源，通常采用较高阶的组件，而不是自己写，比如React Redux的connect(), Relay的createContainer(), Flux Utils的Container.create()
仅通过属性获取数据和回调	null
很少有自己的状态，即使有，也是自己的UI状态	null
除非他们需要的自己的状态，生命周期，或性能优化才会被写为功能组件	null