React series four: understanding component development

join us!

160d554caf1b59 " , to provide front-end developers with technical information and a series of basic articles. For a better user experience, please move to our official website novices (160d554caf1b63 https://xhs-rookies.com/ ) to learn and get the latest articles in time.

"Code tailor" , if you are interested in our article or want to make some suggestions, follow Mountain" public account, contact us, you can also watch it on WeChat Our article. Every suggestion or approval is a great encouragement to us!

Preface

In this section we will introduce the idea of front-end componentization and the idea of componentization in React

This article will introduce you to the following:

• What componentization?
• Why is componentization required?
• Componentization of React
• Advantages of component development
• How to design a component?

What is componentization?

Componentization is a development idea and a solution to the development idea. If a developer does not have a deep understanding of the concept of componentization, there will be a vague feeling about components, and there will be a desire to use componentization. To realize, but the feeling of not being able to lay hands. Just remember that componentization is just an idea, not a specific solution.

we face complex problems, we often use a way of thinking

• Divide the problem step by step and decompose it into many small problems that can be handled
• Then solve them one by one
• Then put it back into the whole, the problem is solved

In fact, the above thought is divide and conquer:

• Divide and conquer is an important idea and the cornerstone of complex system development and maintenance
• The current component development of the front-end is based on the idea of divide and conquer

componentization is also a similar idea to divide and conquer:

• If we put all the page logic on the same page, it will be very complicated to deal with, which is not conducive to later management expansion and maintenance.
• If we split the page logic into small functional blocks, each functional block completes its own independent function, and then integrates into a page, then the management and maintenance of the entire page becomes very easy.

As shown in this picture, we can divide it into the top and bottom list , list can continue to separate some components, which will make our development more convenient and high reuse rate.

componentized thinking to think about the entire application:

• Divide an application into many pages
• Divide a page into many components
• Each component is used to implement a functional block of the page
• Each component can also be subdivided into other smaller components
• The component itself can be reused elsewhere

Why is componentization required?

Sometimes we will encounter some scenarios, such as:

• There are more and more page logic and more and more code. It is difficult to know all the logic after writing, and it is easy to change it into a large piece
• Suddenly there is a problem with your own page, and the result is the influence of other people's code
• The same logic is repeated in multiple places, and a bunch of files need to be changed each time

The emergence of componentization is to solve these reasons.

• The complexity of the project has increased, and there is too much content to be processed per page and file
• The repetition is too high, the modification is cumbersome, and the efficiency is low
• The code quality is poor and the controllability is too low.

React componentization

Componentization is React core idea of our package App itself is a component:

• Componentization provides an abstract way, so that we can use individual small components to combine and build civilized applications
• Any application will be abstracted into a component tree

componentization idea:

• In software development, use componentized thinking
• Split the page into smaller components as much as possible, and try to make these components reusable.

React components can be divided into many types of components in different ways:

• According to the way the components are defined: function components and class components;
• Maintenance is required according to whether there is state inside the component: stateless component and stateful component;
• According to the different responsibilities of the components: display-type components and container-type components;

These concepts have a lot of overlap, but they are mainly concerned with the data logic and UI display :

• Function components, stateless components, and display components mainly focus on the display of UI;
• Class components, stateful components, and container-type components mainly focus on data logic;

So what are the advantages of componentized development?

Two important advantages of component-based development make the front-end engineering and reduce the difficulty of code maintenance.

• Reduce the coupling between the various functions of the system
• Improve the cohesion within the function.
• Minimized redrawing ( diff algorithm)
• Avoid unnecessary dom operations
• Predictable results

The reduction of coupling improves the scalability of the system, reduces development complexity, improves development efficiency, and reduces development costs.

How to design a component?

Single-minded

Design components to follow a principle: a component only focuses on one thing, and do it well .

If a function can be divided into multiple function points, then each function point can be encapsulated into a component.

It is worth noting that it is not that the smaller the component is split, the better. If the component split is small and the reusability is not high, it is also not advisable. You only need to control the functions and logic of a component within a controllable range.

Configurability

When designing a component, it is necessary to be clear about its configurability, that is, what its input and output are.

In addition to displaying the default content, the component also needs to make some dynamic adaptations. For example, if there are text content in the component, it needs to be dynamically modified, based on the value passed externally.

To achieve configurability, the most basic way is to pass the value of the configuration to the component through the attribute, and during the life cycle of component initialization, the corresponding display modification is made by reading the value of the attribute. There are also methods to pass valid values to the function by calling the function exposed by the component; modify the global CSS style; pass a specific event to the component, and listen to the event in the component to execute the function, etc.

Reusability

A key point of encapsulating a component is its reusability.

If it is only used in a single page, it is not necessary to encapsulate it. If all components are subdivided and encapsulated, the readability of the program will be reduced.

The component description is divided into two parts: component description and component realization. Any reusable component must have a feature description (type information of the reused component) and a rule description (the dynamic behavior of the component), which describe the static characteristics and dynamic semantics of the reused component, respectively. In addition, the information describing the reused component should also include component interface information, such as whether the component is a client component or a server component. A component can have multiple "provide" interfaces and "require" interfaces.

Preview of the next section

In this section, we introduced the React componentization. In the next chapter, we will learn to create and use React components, so stay tuned!