咱今天就来好好聊一下那 React.js 高效组件设计实践React 这东西，基于它的组件化开发方式，可是为那富前端的 web 应用提供了老多技术实践社区还慢慢形成了稳定的组件规范。从 API 层面能归纳出 6 种组件类型，咱得好好分析分析它们的优缺点和适用场景，这能给日常组件开发弄个方法指南
这 6 种类型分别是啥——有结构型组件、样式型组件、组合型组件、配置型组件、受控型组件、还有非受控组件！先说说这结构型组件与样式型组件
1. 结构型组件：定义了组件大体的结构，但结构的具体实现是靠外部传递进来的
2. 样式型组件：明确了组件结构的细节，外部只要传递参数就可以渲染出预期的样式。这样式型组件还是挺常用的类型，不过，好多开发者可不太会根据一份设计稿去推断组件未来可能出现的改动，也就让这样式型组件在复用性与拓展性方面显得比较弱
对于那些比较通用的组件，像 按钮、Modal 弹框、Form 表单这类的，可不能光提供样式型的实现得抽象出结构型组件才行这结构型组件和样式型组件可不是非此即彼的关系
样式型组件有着固定的 API 参数，这能降低使用成本。然后结构型组件，有弹性的 API 设定，可以提供扩展性。要是把这两者的优点结合起来就能构造出既简单又可拓展的组件咧！要说这两者结合的优势，最有说服力的实践就是通用组件库结构型组件还能明显降低业务方的沟通成本和接入风险
咱拿样式型组件库和业务方的沟通模型与结构型组件库和业务方的沟通模型来对比对比，每个箭头就代表一个工时。样式型组件库完成一次需求变更得要三个工时，业务方还得等着组件库实现功能后才能接着下一步去做！但这结构型组件库就不一样，它给了业务方更多的自主性业务方不用等着组件库实现新特性，自己通过自定义结构就能满足当前的需求
接着来说说组合型组件：组合型组件就是把多个小的组件组合在一起，实现一个更复杂的功能。这样做能让代码更清晰，各个小组件负责不同的功能模块。比如说一个头部导航栏，可能就是由 logo 组件、菜单组件、搜索组件组合而成的
再说说这配置型组件：配置型组件主要是通过配置不同的参数来实现不同的表现和功能。就好像一个轮播图组件，通过配置图片的数量、切换的时间间隔、切换的效果等参数，就能呈现出各种各样的轮播图样式
还有这受控型组件和非受控型组件。受控型组件的状态是由父组件来控制的，这能让状态的管理变得更加集中和可控！而非受控型组件则是自己管理自己的状态
下面是一些大家可能想问的问题啦：
问：结构型组件和样式型组件结合是不是很难操作
答：其实不会，慢慢去理解它们各自的特性，然后合理设置 API 参数就行多实践几回也就容易上手
问：配置型组件的参数配置复杂不
答：看情况如果功能简单，参数配置也就相对简单，要是功能复杂一些，可能参数就会多点，但慢慢理一理思路也还是能搞明白的
我觉得这 React.js 组件设计里头各个组件类型都有自己的用途和优势。我们开发的时候一定得多考虑组件的复用性、扩展性以及与业务方的契合度，充分利用这些组件类型的特点，这样才能设计出高效的组件来。
