React Class component life cycle and execution order

1. Two ways to define react components

1. Function component. A simple function component is like the following, which receives Props and renders DOM without paying attention to other logic.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Function components cannot use State, nor can they use component lifecycle methods. They do not have this and are purely display components.

Suggestion: When writing a component, first think about whether the component should be written as a display component. If it can be written as a display component, try to write it as a display component.

2. Class components need to inherit React.Component, have State, life cycle, and this

3. Commonalities

a. Whether a component is declared using a function or a class, it must not modify its own props

b. All React components must be pure functions and are prohibited from modifying their own props

c. React is a one-way data flow. If the parent component changes the property, the child component view will be updated.

d. props property is passed from the outside world, and state is the component itself. The state can be modified arbitrarily in the component.

e. Changes in component properties and state will update the view

4. Notes on component definition

a. Component names must start with a capital letter

b. The return value of a component can only have one root element

2. Execution order of life cycle functions in different stages of class components

1. The execution order of class components is as follows

New: getDerivedStateFromProps, getSnapshotBeforeUpdate

UNSAFE: UNSAFE_componentWillMount, UNSAFE_componentWillUpdate, UNSAFE_componentWillReceiveProps will be removed in versions 17 and later

Mounting means that the component is instantiated and inserted into the DOM in the following order:

constructor -> getDerivedStateFromProps -> render -> componentDidMount

Updating means that when the state changes or props changes, it will cause an update. The order is as follows:

getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

Unmounting means that the component is removed from the DOM and only one life cycle is executed: componentWillUnmount

2. constructor(): When a React component is mounted, its constructor is called first.

Purpose: Usually, in React, you only do two things in the constructor:

a. Initialize the internal state by assigning an object to this.state.

b. Bind an instance to the event handling function

Notice:

a. When implementing a constructor for a React.Component subclass, call super(props) before other statements.

Otherwise this.props may be undefined in the constructor

b. Do not call setState inside

3. componentWillMount(), before rendering when the React component is mounted.

Function: You can call the setState method to modify the state. Synchronous methods will block and will not cause secondary rendering, while asynchronous methods will not block and will

Causes a second rendering.

Note: This method has been marked as unsafe and should not be used.

4. getDerivedStateFromProps((props, state), static method, in order to update props to the internal state of the component, hang

Called when downloading and updating.

effect:

a. Update the internal state unconditionally based on props, that is, update the state as long as there is a prop value passed in

b. Update the state value only if the prop value and state value are different

Notice:

a. This cannot be used within a method

b. If the content passed in by props does not need to affect your state, then you need to return a null. This return value is required.

It is necessary, so try to write it at the end of the function.

Asynchronous processing:

Previously, we could perform asynchronous operations in componentWillReceiveProps when props changed.

Changes in props drive changes in state.

The react setState operation is merged through transaction, resulting in a batch update process, while react

Most of the update processes are triggered by setState, so the frequency of render triggering is not very frequent.

Now, in order to respond to changes in props, we should perform asynchronous operations in componentDidUpdate to respond to changes

5. shouldComponentUpdate(nextProps, nextState), when updating, that is, when state or props changes,

Called before render is executed

effect:

a. Performance-optimized lifecycle method. The modified props and state can be obtained in this method, which is consistent with the original props and state.

Determine whether rendering is needed

Notice:

a. The return value of this method must be true or false. If false is returned, rendering will not be executed.

6. render(), the only method that must be implemented in a class component, a pure function

effect:

a. Components and DOM nodes are written here, and a jsx is returned, which is the expression of React.createElement after editing

Notice:

a. The first letter of the component name should be capitalized

b. There can only be one root node

c. You can use <></> as the root node. This node will not be rendered. It is the abbreviation of React.Fragment

7. getSnapshotBeforeUpdate(prevProps, prevState), in the most recent rendering output (submitted to the DOM node)

Previously called, not extended into the test, understanding is limited to this

effect:

a. It enables components to capture some information from the DOM before changes occur (for example, scroll position). Any of this life cycle

The return value will be passed as a parameter to componentDidUpdate()

8. componentDidMount(), which is called immediately after the component is mounted (inserted into the DOM tree)

effect:

a.setState

b. Operate DOM

c. Send a request to obtain initial data

9. componentDidUpdate(prevProps, prevState) will be called immediately after the update (DOM has been updated)

effect:

a.setState

b. Operate DOM

c. Send a request to get data

Notice:

a. setState must be wrapped in a conditional statement, otherwise it will lead to an infinite loop

10. componentWillUnmount(), which is called directly before the component is uninstalled and destroyed

Function: You can release resources here, such as clearing timers, removeEventListener

Note: setState is invalid here and should not be called

11. getDerivedStateFromError Not understood in detail yet

12. componentDidCatch is not understood in detail yet

3. Reference

Official lifecycle API https://react.docschina.org/docs/react-component.html

This is the end of this article about the life cycle of React Class components. For more relevant React Class component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!