Principle of single liability

The single Responsibility principle (SRP) ** is a computer programming principle that states that each class in a computer program should be responsible for a part of the program’s functionality that should be encapsulated. Services for all modules, classes, or functions should be grudgingly consistent with this responsibility.

The React development concept is component-based development. It advises developers to break up the UI into separate reusable code fragments and think about each fragment independently. Finally, a complete application can be built by combining components.

The principle of single responsibility is also the component division principle advocated by React officials. That is, a component can in principle only be responsible for one function. If it needs more functionality, consider breaking it up into smaller components.

Actual business development: specific problem specific analysis

In the react development process, we tried our best to follow this principle, but we still need to analyze the specific situation.

The development of React project I am currently doing is to build a development framework based on UmiJS and use Ant Design Pro, an enterprise-level middle and background front-end/Design solution. Ant Design, a front-end component library, is introduced into the solution, so it can be said to be like Button, Icon, Radio, switch and other basic components, such as from, table, drawer, modal and other combined functions, have been provided to us, we can implement the page out of the box, faster to complete business functions.

In the actual development process, the division of components can be planned according to the principle of single responsibility, and the division of components can be planned more flexibly according to the business scenario.

For example:

Now we need to make a filter, which will have a lot of options, the brand list of the filter, the shop list of the filter, the order type of the filter, the mobile phone number of the filter, the order number of the filter and so on.

Following the principle of single responsibility, we can individually wrap a component for each of these filters.

Start by encapsulating a basic filter component, whose data is passed in externally when the component is used, so that the component can be more generic.

On top of the basic filter component, we can encapsulate the API interface of the data request directly into the filter component, thus implementing some special business components. The API interface that requests the brand list data is encapsulated into the basic component of the filter to form the brand list filter component. Similarly, we can realize the business components such as the counter list filter component and order type filter component.The other phone number filters, order number filters that need to be implemented, can be implemented directly with the base filter because these are essentially filters for strings entered by the user. The phone number filters and order number filters can be implemented by copying the values entered by the user to the phone and Order_ID fields, respectively.

Finally, combined with the design idea of appearance mode, we can realize the brand list filter, counter list filter, order type filter, mobile phone number filter, order number filter and so on, to achieve a large combination of components, including all the big components of the filter.

Appearance model can refer to the following document refactoringguru. Cn/design – patt…

When used, we can control which filter components are displayed in this large component that contains all filters by passing configuration parameters, making it easy to use on many different pages.

Reference documentation

Zh-hans.reactjs.org/docs/thinki…

En.wikipedia.org/wiki/Single…

Pro. Ant. The design/docs/gettin…