怎样才能构建优秀的React组件?

752 阅读4分钟

怎样才能构建优秀的React组件?

这个问题在我脑子里转了好几周了,组件化的目的是为了降低模块之间的耦合。但是实际开发中总还是会将某些模块进行耦合。这里介绍个人对组件化的理解。有何不妥之处,希望积极指出;

什么是组件化?

百度百科:组件化是一种高效的处理复杂应用系统,更好的明确功能模块作用的方式。

通俗理解:在几年前端开发,应用系统中的功能模块之间是相互依赖、高度耦合。例如:修改A模块,就先找到跟A模块相关联的其他模块,注意修改A模块会对其他模块造成的影响;组件化不是一门新技术,它是一种思想。旨于构建纯粹的模块(称为组件化,进行组件化的模块为组件),模块单一功能原则,以此降低模块之间的耦合和依赖。

总结:组件化主要为了拆分复杂应用,降低模块之间的耦合度,明确组件之间的边界,有利于代码维护。提高组件复用(代码复用);

问题总结:

一问:按照单一原则实现模块组件化后,遇到组件之间有交互怎么办?

实际开发过程中,大多数组件之间肯定会有交互的。例如:《列表查询功能模块》可以将其组件化分为《列表展示组件》和《查询组件》,由于《列表组件》需要《查询功能》的支持,那么这两个组件之间就必须存在交互了;而组件之间的交互的形式大致分为以下两种(如下图所示):

在这里插入图片描述

  • 直接交互形式: 通过硬编码的形式将组件之间关联起来,关联复杂度取决于图一中“交互区域”面积多大,即:面积越大,组件之间耦合度越高,边界越模糊,越不利于代码维护和复用;
  • 间接交互形式:通过第三方进行组件交互,避免了组件间的直接交互。它们之间的交互一般来说需要遵循相应的规则,不需要更改原有组件之间的逻辑;(说明:在React系统中,第三方是指自定义/高阶组件、redux等实现手段);

总结:“直接交互”和“间接交互”哪种形式比较好?这个问题没有具体答案,我以为这是根据组件之间关联的复杂度来决定。如果是小型、组件之间关联程度低的,可以利用“直接交互”实现。大型、组件之间关联程度高的,可以使用“间接交互”实现;

二问:根据怎样的粒度将模块进行组件化?

只能说根据实际项目分析、尽量按最小粒度组件化,每个应用系统复杂度是不同的,那么划分的情况又是不一样。没有规则说明需要按照某种粒度来对模块进行组件化。我们只能在开发之前要了解清楚整个项目流程,根据实际项目中不同模块采用不同的粒度进行组件化;例如上述提到的《列表查询功能模块》,你可以将它作为整个组件,也可以将它拆分成《列表展示组件》和《查询组件》,甚至可以进一步将《查询模块》拆分成更小粒度,例如查询组件中的表单,你可以根据表单控件类型(input、select、button、textarea等)单独进行组件化;

总而言之,粒度划分大小主要要考虑到项目性质、项目需求和组件间关联度。而且划分粒度越小,花费的时间成本越大,组件也更利于复用和维护;

简单实例看交互形式(这里用了间接交互,找虐的可以用直接交互的形式更改代码)

DemoOneView;由于是个简单的Demo,故没有采用redux等技术。纯React技术实现;

项目目录结构如下:

  1. DemoOneView:理解为系统中的某个大模块;
  2. index.js文件:提供向外开放DemoView大模块接口;
  3. DemoInfoView目录:理解为将DemoOneView模块拆分成单个模块系统《列表查询功能模块》;
  4. data.js文件:理解为模拟数据(模拟HTTP请求的数据);
  5. ListComponent.jsx文件:理解为单个模块系统《列表查询功能模块》中的《列表展示系统》;
  6. SearchComponent.jsx文件:理解为单个模块系统《列表查询功能模块》中的《查询系统》;
  7. Index.jsx文件:自定义组件理解为间接交互中的第三方,用来关联《列表展示系统》和《查询系统》;

在这里插入图片描述

以上系统中组件化成了2个组件ListComponent.jsx《列表展示系统》和SearchComponent.jsx《查询系统》,并且通过桥梁组件(所谓的第三方) Index.jsx来进行关联交互;运行效果如下:

在这里插入图片描述

github源码地址:github.com/song199210/…