关于React 组件的开发实践

基于 React 的组件化开拓方法，为富前端 web 应用提供大量技能实践，社区逐渐形成了不变的组件类型，本文从 API 层面归纳出 6 种组件范例，说明其优弱点和合用场景，为一般组件开拓提供一个要领指南。6 种范例别离为布局型组件、样式型组件、组合型组件、设置型组件、受控型组件、非受控组件。

布局型组件界说了组件概略布局，布局的详细实现由外部转达。样式型组件确定了组件布局细节，外部只需转达参数即可渲染预期样式。样式型组件是较为常用的组件范例，很少有开拓者会按照一份计划稿来揣度组件将来也许的窜改，这也导致了样式型组件在复用性与拓展性上偏弱。对付较量通用的组件，譬喻 Button 按钮、Modal 弹框、Form 表单等，不该仅提供样式型实现，应该抽象出布局型组件。

这两种范例并不长短此即彼的相关，样式型组件牢靠的 API 参数可以低落行使本钱，布局型组件弹性的 API 设定可以提供扩展性，团结两者的利益可以结构出既简朴又可拓展的组件。关于两者团结的上风最具说服力的实践是通用组件库，布局型组件可明显低落营业方的雷同本钱与接入风险，如下表示图演示了营业方与组件库之间的两种雷同模子：

样式型组件库与营业方的雷同模子

布局型组件库与营业方的雷同模子

以上两种模子每一个箭头为一个工时，样式型组件库完成一次需求改观必要三个工时，营业方要守候组件库实现成果后才气举办下一步。布局型组件库给以营业方更多的自主性，不消守候组件库实现新特征，通过自界说布局满意当前需求，组件库有富裕的时刻说明需求是否通用，是否值得提供新 API，布局型组件在这个进程中饰演了缓冲区的脚色，使得营业方与组件库可以并行协同开拓，确保各自的研发服从与节拍。

组合型组件以 JSX 为主体，通过组件间的嵌套组合描写营业逻辑。设置型组件通过 props 转达数据布局，组件内部按照预先设定好的逻辑渲染视图。一般开拓倾向于写设置型组件，组合型组件更多的呈此刻通用组件库中。

组合型组件布局清楚，扩展性高，组件行使者通过阅读 JSX 的 render 函数即可相识营业逻辑，但组件间接洽薄弱，ref 引用彼此断绝，难以构建伟大的交互组件。设置型组件必要写的代码量少，但组件内部渲染处于黑箱，行使者难以领略组件逻辑，使其在拓展性上偏弱。较量基本的组件，譬喻 Form 表单，Select 选框等，提议回收组合型，有利于行使者组织营业代码，伟大交互组件可行使设置型。

组合型组件最具代表性的实践是 Ant Design，整个组件库的 API 计划严酷遵循组合型优先原则，为统一组件的差异位面别离提供组合型布局，使其在拓展性和易用性上都到达了很高的水准。如下表示图演示了用两种组件范例开拓 Select 选框的演化模子。

Select 简朴选框，组合型与设置型，都能提供清楚易用的接口

较量伟大的 Select 选框组，组合型组件通过提供新的子组件，仍可保持简捷的 API 挪用。设置型组件有两种实现方法：提供新的属性可能扩展原属性，两种方法城市发生必然认知本钱。

对付必要自界说的 Select 选框组，组合型组件得益于 JSX 的嵌套布局，可以很从容的提供自界说 API。设置型组件实现同样的成果，必要再一次拓展属性设置。

这两种范例有另一种表述：无状态组件和有状态组件。受控型组件内部只认真展示，仅对外提供回调，以表达改变的祈望，其最终举动完全由外部驱动。非受控组件由内部处理赏罚某些举动，并不逼迫外部状态同步。官方保举输出无状态受控组件，可是有状态的组件在项目开拓中还是须要的。

受控型组件在自身层面类型了单向数据流，可以与其他数据层框架整合，可是开拓一个伟大的受控型组件，开拓者也许必要向外提供数不清的接口与回调。非受控组件较为智能，组件可以自主维护状态，但开拓者经常因此懒于做状态同步，上层组件从头渲染时，非受控组件会丢失内部的状态，失忆，一般开拓中大大都的 bug 因此而来。

我们常常会以内部是否拥有 state 来权衡一个受控型组件与非受控组件，可是完全遵守这条尺度将很难提供一个简朴易用的大型受控组件，全部状态都由外部节制，行使者必要写大量设置代码才气跑通一个大型组件，行使本钱极高。官方提供的办理方案通过两者团结的方法来处理赏罚受控与易用的抵牾，如下表示图展示了一个 Input 组件可以接管的参数范例。

（编辑：湖南网）

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