如何设计一个组件（一）- 组件分类

一、组件的分类

1. Controlled Component and Uncontrolled Component

Uncontrolled Component

以 input 标签为例，你在组件的任意位置放置一个 <input type="text" />标签，用户可以在这个 input 标签中输入任何内容，也能立即看到他输入的任何内容。

这样无拘无束的 input 标签就是一个不受控制的组件: Uncontrolled Component。

Controlled Component

还是以 input 标签为例，input 标签值是由 state 里的 value 变量决定<input type="text" value={this.state.value} >，如果 value 值不发生改变，那么 input 的值也永远不会发生改变，用户的任何输入都是无效的。

此时的 input 标签则可以算是 Controlled Component。

综上，区分一个组件是 controlled 还是 uncontrolled 类型，是通过它的值是是否由组件自己决定来判断的。

2. Dump Component and Smart Component

Dump Component

Dump Component 又被称为Stateless Component ，它的特征和它名字里描述的一样，组件中不保存任何的状态 (state)。它通常只用来展示数据，甚至都不需要生命周期，所以不需要继承 React.Component。

Dump Component 通常只是一个函数而已。

function ShowName({ name }) {
    return <p>{name}</p>
}

Smart Component

Smart Component 用来加载数据，并且传递数据给其他渲染组件。

class Container extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: ''
        }
    }
    render() {
        const { name } = this.state
        return <ShowName name={name} /> 
    }
}

二、组件的设计原则

1. 标准性
   任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件

2. 独立性
   描述了组件的细粒度，遵循单一职责原则，保持组件的纯粹性
   属性配置等API对外开放，组件内部状态对外封闭，尽可能的少与业务耦合

3. 复用与易用
   UI差异，消化在组件内部（注意并不是写一堆if/else）
   输入输出友好，易用

4. SPOT法则
   尽量不要重复代码

5. 避免暴露组件内部实现

6. 避免直接操作DOM，避免使用ref
   使用父组件的 state 控制子组件的状态而不是直接通过 ref 操作子组件

7. 入口处检查参数的有效性，出口处检查返回的正确性

8. 无环依赖原则(ADP)
   如果出现了环形依赖，应该创建一个共同依赖的新组件来消除依赖

9. 稳定抽象原则(SAP)

10. 避免冗余状态

11. 合理的依赖关系
    父组件不依赖子组件，删除某个子组件不会造成功能异常

12. 扁平化参数
    除了数据，避免复杂的对象，尽量只接收原始类型的值

13. 良好的接口设计

14. API尽量和已知概念保持一致

三、组件的职能化分

基础组件

基础组件可以考虑用优秀的第三方UI组件库 比如antd，element-ui。

容器型组件

一个容器性质的组件，一般当作一个业务子模块的入口，比如一个路由指向的组件。

特点

• 容器组件内的子组件通常具有业务或数据依赖关系
• 集中/统一的状态管理，向其他展示型/容器型组件提供数据（充当数据源）和行为逻辑处理（接收回调）
• 如果使用了全局状态管理，那么容器内部的业务组件可以自行调用全局状态处理业务
• 业务模块内子组件的通信等统筹处理，充当子级组件通信的状态中转站
• 模版基本都是子级组件的集合，很少包含DOM标签
• 辅助代码分离

展示型（stateless）组件

特点

• 只通过props接受数据和回调函数，不充当数据源
• 可能包含展示和容器组件 并且一般会有Dom标签和css样式
• 通常用props.children(react) 或者slot(vue)来包含其他组件
• 对第三方没有依赖（对于一个应用级的组件来说可以有）
• 可以有状态，在其生命周期内可以操纵并改变其内部状态，职责单一，将- 不属于自己的行为通过回调传递出去，让父级去处理（搜索组件的搜索事件/表单的添加事件）

业务组件

通常是根据最小业务状态抽象而出，有些业务组件也具有一定的复用性，但大多数是一次性组件。

通用组件

可以在一个或多个APP内通用的组件，要考虑方便其他开发使用。

特点

复用性强，只通过 props、events 和 slots 等组件接口与外部通信。注意不要引入全局的store。

高阶组件（HOC）

高阶组件可以看做是函数式编程中的组合 可以把高阶组件看做是一个函数，他接收一个组件作为参数，并返回一个功能增强的组件。

高阶组件可以抽象组件公共功能的方法而不污染你本身的组件 比如 debounce 与 throttle。

---

参考链接：
常见的组件类型
聊聊组件设计