The life cycle of react components

Review the previous knowledge

1. Props can only pass data, cannot be modified, and can only be passed to child components through parent component;
2. State is used to hold the states of the interaction, with each component having its own status property. Data cannot be passed between components.
3. The values passed between components can find the parent component that is common among these components, and the State property is set on the parent component.
4. The react can be used to complete the asynchronous submission of Ajax via the Fetch () method.
5. The first two components of the component life cycle:
   • The Componentwillmount component is loaded before it is rendered and is modified in this cycle without rendering again.
   • The Componentdidlmount component is loaded after rendering and is modified in this cycle to render again.

The life cycle of a component

1. Componentwillreceiveprops (Props change execution of the component), there is a parameter (Newprops) that will not be executed if only the state of the current component is changed.
2. Shouldcomponentupdate is executed whenever the attribute props or state changes. The return value is a Boolean value that executes the subsequent period when the return value is true, and the return value is false when the subsequent period is not executed. There are two parameters (Newprops, newstate).

The state can be modified in the previous two cycles.

3. The Componentwillupdate component is about to be modified to execute. You cannot modify the state in this cycle, or you will fall into a dead loop.
4. Render Component rendering
5. After the Componmentdidupdate component is modified, the state cannot be modified inside this cycle.
6. Last life cycle, the Componmentwillunmount component is executed after it is destroyed.

A short article that complements a more comprehensive component declaration cycle.

The life cycle of react components

A component is a state machine, and he always returns a consistent output for a particular state. The life cycle of a component

Instantiation of

Getdefaultprops:

For component classes, this method executes only once. For new instances that are not pinned to the props property by the parent component, the object returned by this method can be used to set the default props value for the instance.

Getinitialstate:

For each instance of a component, this method is called only once. In this method, you can initialize the state of each instance of you. Unlike the Getdefaultprops method, the method is called once each time the instance is created. In this method, you can already access the this.props.

Componmentwillmount:

This method is executed before the first rendering is completed, which is the last chance that the component state can be modified before the Render method is called.

Render:

Here you will create a virtual DOM to represent the output of the component. For a component, Render is the only one that must be illegal and has specific rules. The Render method needs to meet several conditions. 0 data can only be accessed via This.props and this.state. 0 may return null, FALSE, or any of the React component 0 can only have one top-level component, cannot return a set of elements 0 must be pure, meaning that you cannot change the state of the component or modify the output of the DOM

Componmentdidmount:

After the Render method executes successfully, the actual Dom is rendered, and you can access the native DOM using the This.getdomnode () method in the method.

Existence period

At this point, the component is rendered well and can be interacted with by the user. As the user clicks, fingers swipe, and so on, changing the state of the component or the entire application, there will be a new state flowing into the component tree, and we will get the chance to manipulate it.

Componmentwillreceiveprops:

At any moment, the props of the component can be changed by the parent component. When this happens, the Componmentwillreceiveprops method is dropped and you get the chance to change props and state. Shouldcomponentupdate:

By invoking this method, the component can be precisely optimized. If you determine that a component or any of its child controls do not need to render a new state or props, set the return value of the method to false. React will skip render. And the hook method before and after the render, Componmentwillupdate and componmentdidupdate. This method is not required, and in most cases it is not necessary to use it in development.

Componmentwillupdate:

Similar to the Componmentwillmount method, the component calls the method before it receives a new props or state for rendering. It should be noted that State or props cannot be updated in the method, but should be updated at run time with the Componmentwillreceiveprops method.

Componmentdidupdate:

As with the Componmentdidmount method, we can make changes to the already rendered DOM here.

Destruction & Cleanup Period

Componmentwillunmount: Here are some things to do after the component is removed.

The life cycle of react components