The life cycle of a Class component

The life cycle describes the complete process of component creation through uninstall. React provides a series of lifecycle functions, such as first rendering into the DOM, component update completion, and component uninstallation.

The React component’s life cycle is divided into three phases

Mounting Stage (Mounting) The Mounting stage starts with the component initialization and continues until the component is created and rendered into the REAL DOM

2) Updating, which starts with the component and monitors until the component is updated and the DOM is re-rendered

3) Unmounting Stage: In this stage, the component is unmounted from the DOM

The mount phase of the component

The following lifecycle functions are called in turn

Constructor (constructor), which inherits from the Component class. Don’t forget to add super

Static getDerivedStateFromProps(props,state). This method is used to obtain state from props. During the mount phase, this method can obtain the current props and state, and then modify the state based on the props. Note the following points when using:

- This method is static and cannot be used internally - this lifecycle function was added after React16.3, use the note version - must have a return value, which is a modification of state, equivalent to when this.setstate () is called elsewhere, The passed modification object - this object is used to modify state according to props, so the state property is defined when the component is initializedCopy the code

3, componentWillMount, represents the component to be mounted, use note:

- Not recommended after Act 16.3 - this and getDerivedStateFromProps cannot be used togetherCopy the code

4, render. This method is particularly important because it generates the virtual DOM from the values in the return, which is then submitted to the ReactDOM to render the real DOM

ComponentDidMount the component has been mounted and the virtual DOM has been added to the real DOM

The above methods are the lifecycle functions that a component calls during the mount phase, in order: Constructor ->getDerivedStateFromProps or componentWillMount-> Render ->componentDidMount

Component update phase

That is, methods such as setState are called to cause the component to update

There are three different processes in the React component update lifecycle

Current component updates caused by parent component updates, current component updates itself, forceUpdate

1. Update the parent component

A parent component update also causes the current component to update. There is a slight difference between replay 16.3 and after and before REPLAY 16.3, since the parent component updates the lifecycle functions that the current component will call

React16.3 before

1) componentWillReceiveProps (nextProps), the life cycle of function in the parent components updated subcomponents trigger when receiving the new Props. This. prop is called in this function as props before the update, and nextProps is used after the update

ShouldComponentUpdate (nextProps,nextState), this method is used to determine whether to update the component. As with WillReceiveProps, this. Props and this. State are props and state before the update. In addition, this method must have a return value, a Boolean value, which defines whether the component is updated or not. When the return value is true, the lifecycle continues and the component continues to update. When the return value is false, component updates are stopped and subsequent lifecycle functions are not called

3) componentWillUpdate(nextProps,nextState) component is about to be updated. The related use of props and state is the same as 2)

Generate the virtual DOM according to the new props and state, then compare the new virtual DOM with the old virtual DOM to find the update point, and update the real DOM. In this method, this.props and this.state are both updated values

5) componentDidUpdate(prevProps,prevState). This method means that the component has been updated and the real DOM has been re-rendered. In this method, if you want to get the props and state before the update, you can receive them as parameters.

Prior to Act 16.3, parent component updates cause child component updates, in the order of the lifecycle called: componentWillReceiveProps->shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate

React16.3 and later

In React16.3 getDerivedStateFromProps method is used to replace componentWillReceiveProps. In addition since React16.3 componentWillReceiveProps and componentWillUpdate gradually abandoned, if to React17. X also want to use relevant methods prefixed with UNSAFE_, And components used in after getDerivedStateFromProps componentWillReceiveProps and componentWillUpdate will not perform. Component updates caused by parent component updates after Act16.3 are as follows:

1) static getDerivedStateFormProps(newProps,newState) during the update phase, newProps and state can be obtained, and the returned value is also the modified state

ShouldComponentUpdate Check whether the component is updated

Render generates a new virtual DOM

4) getSnapshotBeforeUpdate(prevProps,prevState). This method is new in React16.3. This method is executed after render generates the virtual DOM and before render the real DOM

-getSnapshotbeforeUpdate this.state and this.props have been updated to the new props and state. To get the old one, you can get it from the parameter. -getSnapshotbeforeUpdate must have a return value. The return value is passed to componentDidUpdateCopy the code

(5) componentDidUpate prevProps prevState, snapshot) in React16.3, added the third parameter snapshot, used to receive getSnapshotBeforeUpdate return values passed through information

The lifecycle functions for the update phase are called in the order of React16.3 and later: static getDerivedStateFromProps->shouldComponentUpdate->render->getSnapshotBeforeUpdate->componentDidUpdate

2. The component updates itself

The component updates itself by calling setState inside the component, causing the current component to update. The component update process has gone through three versions in React: before Act 16.3, Act 16.3, Act 16.4, and later

ShouldComponentUpdate ->componentWillUpdate-> Render ->componentDidUpdate The component doesn’t listen for props changes when it updates itself, it only listens for state changes

2) In Act16.3, as the lifecycle function changes, so does the function called by the component to update itself. The call process is as follows: shouldComponentUpdate->render->getSnapshotBeforeUpdate->componentDidUpdate

3) Update 16.4 and later, in order to better the developers, the official made another adjustment, the component update and the parent component update unified, the order is: static getDerivedStateFormProps->shouldComponentUpdate->render->getSnapshotBeforeUpdate->componentDidUpdate

3, forceUpdate

In addition to updating components with setState and updates from parent component updates, React has another way of updating components — forceUpdate. When the component depends on data other than state and the data changes, you can use the forceUpdate method to expect the view to change as well

let name = 'name';
class App extends Component {
    render(){
        return <div>
            <p>{name}</p>
            <button onClick={()= >{name = 'new name '; this.forceUpdate(); }}> Update the name</button>
        </div>}}Copy the code

ForceUpdate forces the view to be updated, so the life cycle is slightly different from other threads and shouldComponentUpdate is not called

The component uninstall phase

That is, remove the component from the DOM

There is only one life cycle function for the unloading phase, namely componentWillUnmount

This method is used to listen for components that are about to be uninstalled, and is usually used to remove some of the component’s global content when it is uninstalled

Also attached are the life cycle diagrams of the three versions:

The lifecycle of a function component

UseEffectHooks is the useEffectHooks API for effecthooks. The useEffectHooks API is the useEffectHooks API for Effecthooks. The useEffectHooks API is the useEffectHooks API for Effecthooks.

Component Mount -> Perform Side effects (callback function)-> Component Update -> Perform cleanup function (return function)-> Perform Side effects (callback function)-> Component Ready to unload -> Perform Cleanup function (return function)-> Component unload

If you simply want to do it during the component mount, update, and uninstall phases

  • UseEffect (callback, []) relies on null arguments for componentDidMount and componentWillUnmount
  • UseEffect (callback, [args]); useEffect(callback, [args]); useEffect(callback, [args])