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

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

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

总结：组件化主要为了拆分复杂应用，降低模块之间的耦合度，明确组件之间的边界，有利于代码维护。提高组件复用（代码复用）；

问题总结:

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

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

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

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

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

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

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