组件开发实践

组件定义了组件大体结构，结构的具体实现由外部传递。样式型组件确定了组件结构细节，外部只需传递参数即可渲染预期样式。样式型组件是较为常用的组件类型，很少有开发者会根据一份设计稿来推断组件未来可能的改动，这也导致了样式型组件在复用性与拓展性上偏弱。对于比较通用的组件，例如 Button 按钮、Modal 弹框、Form 表单等，不应仅提供样式型实现，应该抽象出结构型组件。

这两种类型并不是非此即彼的关系，样式型组件固定的 API 参数可以降低使用成本，结构型组件弹性的 API 设定可以提供扩展性，结合两者的优点可以构造出既简单又可拓展的组件。关于两者结合的优势最具说服力的实践是通用组件库，结构型组件可显著降低业务方的沟通成本与接入风险，如下示意图演示了业务方与组件上两种模型每一个箭头为一个工时，样式型组件库完成一次需求变更需要三个工时，业务方要等待组件库实现功能后才能进行下一步。结构型组件库给予业务方更多的自主性，不用等待组件库实现新特性，通过自定义结构满足当前需求，组件库有充足的时间分析需求是否通用，是否值得提供新 API，结构型组件在这个过程中扮演了缓冲区的角色，使得业务方与组件库可以并行协同开发，确保各自的研发效率与节奏。合型组件以 JSX 为主体，通过组件间的嵌套组合描述业务逻辑。配置型组件通过 props 传递数据结构，组件内部根据预先设定好的逻辑渲染视图。日常开发倾向于写配置型组件，组合型组件更多的出现在通用组件库中。

组合型组件结构清晰，扩展性高，组件使用者通过阅读 JSX 的 render 函数即可了解业务逻辑，但组件间联系微弱，ref 引用相互隔离，难以构建复杂的交互组件。配置型组件需要写的代码量少，但组件内部渲染处于黑箱，使用者难以理解组件逻辑，使其在拓展性上偏弱。比较基础的组件，例如 Form 表单，Select 选框等，建议采用组合型，有利于使用者组织业务代码，复杂交互组件可使用配置型。

组合型组件最具代表性的实践是 Ant Design，整个组件库的 API 设计严格遵循组合型优先原则，为同一组件的不同位面分别提供组合型结构，使其在拓展性和易用性上都达到了很高的水准。如下示意图演示了用两种组件类型开发 Select 选框的演化模型。

Select 简单选框，组合型与配置型，都能提供清晰易用的接口

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!