前端组件化

在做项目的时候，经常会听的一个词汇就是组件化，那么到底什么是组件化？它又有什么意义呢？

一、 什么是组件化？

组件化

• 组件化的定义：百度百科中对于组件化的定义为解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性，对于这句话我的理解是，前端的组件化，其实是对项目的一种自上而下的拆分，将通用的、可复用的功能视图、代码，封装在一块变为组件，然后暴露一些开箱即用的函数或属性配置供外部组件调用（即当我使用此封装组件时，我不应该还需要去仔细的查看组件的代码逻辑，而是根据你提供的组件的配置的API传递给组件相应的值后，就可以达到我预期的效果，如antd中的Input、Table等，我们并不需要去查看组件的源码，只需要根据例子传递相应API的值即可），实现最大限度的可复用性，并以这些组件来组合更复杂的组件、页面，就像是搭积木

项目组成

• 一个项目由N个模块组成，一个模块由多个页面组成，一个页面又会包含一个或多个业务组件，一个业务组件由多个基础组件和业务逻辑组成，所以一个项目的地基应该是各个基础组件和业务逻辑的串联
  1. 基础组件：不包含业务逻辑，用来实现具体的功能（如antd的Input、Button等），对组件的使用者来说，基础组件就是最小的功能点，他们不需要关心也无法修改组件内部的代码，只需要使用组件暴露出的props的配置来实现不同的功能即可，如（Table组件的columns和dataSource等）
  2. 业务组件：由基础组件组成，含有业务逻辑的组件

二、为什么需要组件化？

项目开发中，页面和功能大都拆分为多文件来实现，并不都是由一个人来完成，团队协作开发时不可避免的将会出现以下问题：

• 相似的业务代码无法复用：X同事实现了一遍A页面，Y同事要实现一个和A类似的B页面，于是将X同事的代码粘贴复制了一遍
• 多人重复实现同一功能：X同事完成了A功能，Y同事要实现一个同样的功能，X没有封装为组件，Y又重新写了一遍

随着项目的迭代，将会导致

• 代码体积不断增加，性能越来越差，冗余越来越多
• 业务逻辑的复杂度增加，代码的可维护性、可读性越来越差

这种情况下，前端组件化的引入，将从功能模块的复用及多人协作层面进行解耦，比如项目A中有B、C两个页面，每个页面中都有相同的功能X，假设没有将Z封装为组件，那当此功能修改为Y时，需要在B、C两个页面进行修改，但是如果封装为组件Z，只需要将组件Z修改为Y即可，增加了代码的可维护性和可读性，复用组件的方式也最大限度的避免了项目的冗余