单一责任原则

单一责任原则（SRP）**是计算机编程原则，它规定计算机程序中的每一个类都应当对程序功能的一个部分负责，而该部分的功能应该封装。所有模块、类或函数的服务都应与该责任勉强保持一致。

React开发提出来的概念就是组件化开发，它建议开发者将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思，最后通过组件的组合，构建出完整的应用。

单一职责的原则，也是React官方比较推崇的组件划分原则。也就是说，一个组件原则上只能负责一个功能。如果它需要负责更多的功能，这时候就应该考虑将它拆分成更小的组件。

实际业务的开发：具体问题具体分析

在做react开发的过程中，我们也是尽量遵循这一原则，但是具体事情还得具体分析。

我目前所做的React项目的开发，是基于UmiJS进行开发框架的搭建，使用了Ant Design Pro 这样一个企业级中后台前端/设计解决方案，此方案中引入了 Ant Design 这个前端组件库，所以说像button，icon，radio，switch等等这样的基础组件，像是from，table，drawer，modal等这样的组合功能，已经都给我们提供了，我们在实现页面的时候就可以开箱即用，更快的完成业务功能。

实际开发过程中，可以按照单一职责原则去规划组件的划分，同时也可以需要根据业务场景，更加灵活的去规划组件的划分。

举例说明：

现在我们要做一个筛选器，里面会有很多的选项，品牌列表的筛选，专柜列表的筛选，订单类型的筛选，手机号码的筛选，订单号的筛选等等。

按照单一职责的原则，我们可以单独为这每一个筛选器封装一个组件。

首先先封装一个基础的筛选器组件，筛选器的数据在使用该组件的时候从外部传入，这样这个组件就可以比较通用一些。

在基础的筛选器组件的基础上，我们可以将数据请求的api接口直接封装到筛选器组件中，这样就实现了一些特殊的业务组件。将请求品牌列表数据的api接口封装到筛选器基础组件中形成品牌列表筛选器组件，同理，我们可以实现专柜列表筛选器组件，订单类型筛选器组件等业务组件。其他需要实现的手机号筛选器，订单号筛选器，因为本质来说，这些都是用户输入的字符串的筛选，所以可以直接用基础筛选器来实现，用户输入的值分别复制给phone和order_id字段就可以完成手机号筛选器和订单号筛选器的实现。