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

怎样才能构建优秀的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/…