React18. life cycle

React life cycle diagram

Through this picture, you can see the four major stages of the React life cycle:

1. Initialization: Initialization phase
2. Mounting: mounting phase
3. Update: update stage
4. Unmounting: Destruction phase

What are lifecycle functions?

In one sentence: the life cycle function refers to the function that the component will automatically call and execute at a certain moment.

For example: in the Child,js component. The render() function inside. It is a life cycle function that is automatically executed when the state changes. This is a standard automatic execution function

constructor does not count the life cycle function,
constructor is a constructor function, which is the basic syntax of ES6. Although it has the same properties as the life cycle function, it cannot be considered a life cycle function. But I personally think it should be regarded as a life cycle function in my heart. I personally regard it as the Initialization stage of React, defining properties (props) and state (state).

Initialization initialization phase

In fact, what is done at this stage is initialization. Initialize property props and state state.

Mounting stage

The Mounting phase is called the mounting phase and is accompanied by the declaration of the entire virtual DOM. There are three small life cycle functions in it, namely:

1. componentWillMount: executed when the component is about to be mounted to the page
2. render: executed when page state or props change
3. componentDidMount`: executed after the component is mounted.

Below we can write some code to verify the execution sequence of the following three stages:

1. componentWillMount代码
// 组件挂载之前
    componentWillMount() {
    
    
        console.log('componentWillMount --------- 组件挂载之前')
    }

2. render 代码
	render() {
    
    
        console.log('render -------- 组件中')
    }

3. componentDidMount代码
	// 组件挂载之后
    componentDidMount() {
    
    
        console.log('componentDidMount --------- 组件挂载之后')
    }

When you open the console at this time, you will find that the output is in the order: before the component is mounted -> in the component -> after the component is mounted.

Note: The two life cycle functions componentWillMount and componentDidMount are only executed once when the page is refreshed, while the render function is executed whenever there are changes in state and props.

Update stage

Update will be executed when the component changes. It is a more complex part of the life cycle, consisting of two parts: one is the change of props attributes, and the other is the change of state.

shouldComponentUpdate function
This function will be automatically executed before the component is updated. For example, the following code:

	// 组件更新之前执行
    shouldComponentUpdate() {
    
    
        console.log('shouldComponentUpdate ------- 组件更新之前')
        return true
    }

It requires a Boolean result to be returned, and there must be a return value. Here, a true is returned.
At this point you can view the results in the console. And the result is that it changes every time the text box changes. If false is returned, the component will not be updated. simply put. Return true to agree to component updates. Otherwise, component updates are prevented.

componentWillUpdate function
This function is executed before the component is updated but after shouldComponentUpdate. If shouldComponentUpdate returns false, the function will not be executed.

	// 组件更新之前，shouldComponentUpdate函数之后执行。如果shouldComponentUpdate返回false，就不会执行该函数
    componentWillUpdate() {
    
    
        console.log('componentWillUpdate --------- 组件更新之前，shouldComponentUpdate函数之后')
    }

componentDidUpdate function
This function is executed after the component is updated. It is the last step in the component update.

	// 组件更新之后执行。组件更新的最后一个环节
    componentDidUpdate() {
    
    
        console.log('componentDidUpdate --------- 组件更新之后')
    }

At this point, you can open the console to see the changes in the output

componentWillReceiveProps function
First, you can write this function in the Child.js component. The following code:

	componentWillReceiveProps() {
    
    
        console.log('componentWillReceiveProps ---------')
    }

When you open the console at this time, you will find that the function is not executed. In fact, it is because Child.js is a top-level component and does not receive any props, so it is not executed. You can move this function to ChildItem.js and check the effect again.

Every component has a life cycle function, so sub-components also have it, and the sub-component receives props, and the function can be executed at this time.

The execution time of componentWillReceiveProps is: the child component receives the parameters passed by the parent component, the parent component render function is re-executed, and this life cycle function will be executed.

• In other words, the first time this component exists in the DOM, the function will not be executed;
• The function will only be executed if it already exists in the DOM.

Unmounting Unmounting phase

This life cycle means: the component is executed during the uninstall phase.

componentWillUnmount function
This function is executed when the component is removed from the page. For example, in ChildItem.js, write the following code:

	// 页面卸载时执行
    componentWillUnmount() {
    
    
        console.log('componentWillUnmount ----------- child')
    }

After writing, you can go to the page and click to delete an item, which will trigger the function.