谈谈前端组件化

一、什么是组件化

什么是组件化？不同的人对组件化有着不同理解，我理解的组件化是一种编程思想，是一种拆分代码的方式。对前端开发来说，大到一个页面，小到一个html标签都可以说是一个组件。组件化的概念并不难理解，难的是理解组件化的思想。

二、如何理解组件化

在理解组件化之前，我们得先说说我们为什么要有组件化的思想以及组件化解决了什么问题。通俗的说前端组件化就是为了代码复用，提高研发效率。那么我们在设计组件的时候难免要思考两个问题：

1. 组件该如何拆？（拆分）
2. 组件该怎么用？（组合）

因此，我把‘什么是组件化？’分成了拆分和组合两个问题。

三、组件如何拆分

大家对组件化的理解不同，组件拆分的方式也不同，因此组件拆分最重要的是有统一的拆分方式和拆分原则。我结合蚂蚁金服前端资产市场划分和Vue组件化应用概念总结出了四种组件：基础组件、业务组件、区块组件和页面组件。

蚂蚁金服前端资产市场划分图

Vue组件化应用

• 基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件
• 业务组件：由基础组件组合成的业务抽象化UI，后端封装了相应的class
• 区块组件：由基础组件组件和业务组件组合成的UI块
• 页面组件：展示给用户的最终页面

四种组件的关系就像数学中的点、线、面和体，体由面组成，面由线组成，面由点组成。
举个分为消息列表和功能栏两部分的聊天页面的例子来学习下，可以参照微信聊天页想象下UI。

• 业务组件：

// MessageItem 

    // 用户头像
    
   // 用户名
    
user name
    // 消息内容
    
说点啥

• 区块组件：

// MessageList

    {messages.map(message => 

// FunctionBar

    // 消息输入框
    
    // 发送消息
    发送

• 页面组件

// Chat 

    |
    

组件划分表

这样一个聊天页的UI就拆分完了，大家可能会有个疑问，因为我说的这些都只是UI，没有涉及JS业务逻辑部分。没错，组件的拆分并不会有这么简单，但是在拆分组件上，我们可以先从UI上拆分出四种维度的组件，然后再根据组合的方式填充js的逻辑。

四、组件怎么组合

组件的结合方式我根据组件的数据传递方式合组件的逻辑处理方式也总结出了两种：渐进式和离散式。

• 渐进式：数据逐层传递，组件各自负责自己的业务逻辑
• 离散式：数据统一处理，集中处理业务逻辑

渐进式和离散式两种组合方式其实也分别对应了Vue和React两种js框架的语言特点。Vue提供了v-model数据双向绑定机制，容易处理组件上下级间的数据，比较适合渐进式，而且它本来就声明自己是渐进式JavaScript框架。而React提倡函数式编程，是不完全双向数据绑定的JavaScript框架，通常需要onChange事件来更新父级的state来更新View，因此React更适合离散式组合方式。当然，两种方式都可以用两种框架来实现。

Vue

4.1 渐进式组合方式

我们在拆分组件中的例子的组合方式就属于渐进式组合的方式，渐进式组合方式的优点就是组件的职责划分清晰。缺点就是不相邻组件之间的通信缺少灵活性。

4.2 离散式组合方式

用离散式重写下聊天页面：

// MessageList

    {this.props.children}

// Chat 

    
          messages.map(message => 
    
    

我改变了下MessageList和Chat的写法，把message的传递路径从Chat -> MessageList -> MessageItem改成了Chat -> MessageItem，这样就可以缩减数据传递和callBack传递的路径了。

4.3 渐进式&&离散式

渐进式和离散式的组合方式都有各自的优点合缺点，数据单向传递可以采用渐进式，但是callBack最好是可以一步到位，在保证callBack路径的基础上尽量实现渐进式才是最好的组合方式。

最后说点什么

文章并没有具体的说什么是组件化和什么是组件化思想，其实不管是组件化思想还是面向对象，只要是编程思想就离不开软件设计的核心原则：高内聚低耦合。组件化并不是就是适合所有的团队或者项目，因为在实际开发工作中会有许多不理想的情况，比如一个小项目没有那么多重复的代码，比如设计团队才华横溢根本不认可组件化等等。但是在前端工程化中，组件化才是重要的环节，在提高团队效率方面，还有什么能比组件化优秀呢？