Reasonably design React components to make the code more beautiful! !

The purpose of react is to componentize the front-end page and use the state machine thinking model to control the components. There is definitely a relationship between components. Through reasonable component design and delineating appropriate boundaries for each component, we can effectively reduce the impact on other components when we reconstruct the page. At the same time, it can also make our code more beautiful.

1. High coupling and low cohesion.

High coupling: Put the closely related functional parts into a container component and expose index.js to the outside world. The directory structure is as follows:

├── components
│   └── App
└── index.js

Low cohesion: When this component is directly on the calling page When deleted, no impact will be triggered; unnecessary repeated renderings are reduced; the scope of influence during repeated renderings is reduced.

2. Display component and container component

Display component	Container component
Focus on the presentation of things	Focus on how things work
May include presentation and container components, and will generally have DOM tags and css styles	May contain presentation and container components, and will not have DOM tags and css styles
Often allowed to be passed through this.props.children	Provide data and Behaviors are given to container components or display components
Without any dependencies on third parties, such as store or flux action	Call flux action and provide their callbacks to the display component
Don’t specify how data is loaded and changed	As a data source, higher-order components are usually used instead of writing them yourself, such as React Redux’s connect(), Relay’s createContainer(), Container.create() of Flux Utils
Rarely has its own state, even if it does, it is its own UI state

The focus here is this.props.children. Through this.props.children we can easily make our components low-cohesion. In actual development, we often encounter display components written with pure components and container components that continue to deal with data. Here just use this.props.children to cover these container components. Then the trapped container component can continue to create a new folder according to the above rules and expose index.js.
The biggest advantage of this way of writing is that you can quickly find where the component you wrote is, what it does, and what it affects.

3. One-way data flow from top to bottom

When we have to design to meet the above conditions, using one-way data flow from top to bottom will allow us to use something like When using a state management tool like redux, the scope of influence is more controllable, and shouldComponentUpdate is used to reduce unnecessary rendering. (But it is really troublesome to write this way, but react uses the new life cycle function getDerivedStateFromProps starting from v16.3 to force developers to optimize this step)

4. Controlled components and uncontrolled components

There are many web components that can be changed by user interaction, such as: , . These components can change the value of the component by entering some content or setting the value attribute of the element. However, because React is bound by one-way data flow, these components may become out of control:
1. An component that maintains the value in its own state cannot be modified from the outside
2 .An component that sets a value through props can only be updated through external control.

Controlled component:

A controlled should have a value attribute. Rendering a controlled component displays the value of the value attribute.
A controlled component does not maintain its own internal state, and the rendering of the component purely depends on props. In other words, if we have an component that sets value through props, no matter how you input, it will only display props.value. In other words, your component is read-only.
When dealing with a controlled component, you should always pass a value attribute in and register an onChange callback function to make the component variable.

Uncontrolled component:

An without a value attribute is an uncontrolled component. Through rendered elements, any user input is reflected immediately. Uncontrolled can only notify the upper layer of changes input by the user through the OnChange function.

# Hybrid component:

Maintain the values ​​of props.value and state.value at the same time. props.value has higher priority in display, and state.value represents the real value of the component.

5. Use higher-order components (HOC)

Simple definition: a function that receives a react component as a parameter and returns another component.
What can be done: code reuse, code modularization, adding, deleting, and modifying props

Use cases: For example, if the company suddenly wants to bury different click points for the front-end code, it can use hoc to wrap one layer without changing the original parts. The code has been reasonably modified at the same time.

6. Standard process of addition, deletion, modification and query

Add: fill in the data, verify the data, insert the data, and re-query the data list.
Delete: Confirm deletion and query the data list again.
Check: query the data list, display in paging

Change: fill in the data, verify the data, modify the data, re-query the data list

In fact, there is no need to componentize prematurely when designing components. We can quickly write a version first, and then split it according to the actual design to cope with rapid changes in requirements in the early stages of the project. Then we change our project bit by bit according to the design pattern. As long as the design pattern is reasonably split, it is actually a very smooth and natural thing.

For more programming related knowledge, please visit: Programming Video

! ! ###

The above is the detailed content of Reasonably design React components to make the code more beautiful! !. For more information, please follow other related articles on the PHP Chinese website!