What are the life cycle functions of react?

The life cycle functions of react are: 1. componentWillMount function; 2. componentDidMount function; 3. shouldComponentUpdate function; 4. componentWillUpdate function; 5. componentDidUpdate function; 6. componentWillUnmount function; 7. componentWillReceiveProps function.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What are the life cycle functions of react?

react’s life cycle function (super detailed)

Without further ado, let’s get straight to the point!

First let’s take a look at the life cycle functions of react:

• The function that is triggered when the component is about to be mounted: componentWillMount

• The function that is triggered when the component is mounted: componentDidMount

• The function that is triggered when the data is to be updated: shouldComponentUpdate

• #The function that is triggered when the data is about to be updated: componentWillUpdate

• The function that is triggered when the data update is completed Function: componentDidUpdate

• Function triggered when the component is about to be destroyed: componentWillUnmount

• Parent component The function that is triggered when props transfer values ​​has been changed: componentWillReceiveProps

Let’s explain the code in detail

1. Mounting part
According to the official life cycle diagram, we can see that the loading and rendering of a component starts with defaultProps and propsTypes (these two will be discussed separately in the next article, and it is not the focus here)
Then there is constructor and the initial data in this.state, so here is the first step. Then the componentWillMount component is about to start mounting. This is the second step. Then the component is mounted, render parses and renders, so the third step is about to happen, that is, render data is all rendered, and finally componentDidMount
the component is mounted.

Sub-component code, just introduce rendering into the parent component (no code here)

import React ,{Component} from 'react'

class Smzq extends Component{
    constructor(props){
        console.log('01构造函数')
        super(props)
        this.state={

        }
    }
    //组件将要挂载时候触发的生命周期函数
    componentWillMount(){
        console.log('02组件将要挂载')
    }
    //组件挂载完成时候触发的生命周期函数
    componentDidMount(){
        console.log('04组件将要挂载')
    }
    render(){
        console.log('03数据渲染render')
        return(
            <div>
                生命周期函数演示
            </div>
        )
    }
}
export default Smzq

Open the console to view

2. Data update part
The first step for data update is shouldComponentUpdate to confirm whether to update the data, only when this function returns true Will be updated, and this function can declare two parameters nextProps and nextState,
nextProps is the value passed from the parent component to the child component, nextState is after the data is updated value, these two values ​​​​can be obtained in this function. In the second step, after confirming the updated data, componentWillUpdate will update the data . The third step is still render. If the data changes, render will be re-rendered. The fourth step is componentDidUpdate data update is completed.

In terms of code, based on the previous part, the subcomponent defines an initial data in this.state, binds this data in render, and then adds a button to declare an onClick event to change this data. In this way, you can see the effect of the data update part. I have deleted the first part of the code here to make it look less messy.

import React ,{Component} from 'react'

class Smzq extends Component{
    constructor(props){
        super(props)
        this.state={
            msg:'我是一个msg数据'
        }
    }
    //是否要更新数据，如果返回true才会更新数据
    shouldComponentUpdate(nextProps,nextState){
        console.log('01是否要更新数据')
        console.log(nextProps)      //父组件传给子组件的值，这里没有会显示空
        console.log(nextState)      //数据更新后的值
        return true;               //返回true，确认更新
    }
    //将要更新数据的时候触发的
    componentWillUpdate(){
        console.log('02组件将要更新')
    }
    //更新数据时候触发的生命周期函数
    componentDidUpdate(){
        console.log('04组件更新完成')
    }
    //更新数据
    setMsg(){
        this.setState({
            msg:'我是改变后的msg数据'
        })
    }
    render(){
        console.log('03数据渲染render')
        return(
            <div>
                {this.state.msg}
                <br>
                <hr>
                <button>this.setMsg()}>更新msg的数据</button>
            </div>
        )
    }
}
export default Smzq

3. Let’s talk about componentWillReceiveProps separately. The function that is triggered when the props value is changed in the parent component
This function is when we The function that is triggered when the parent component changes the value of props when passing values ​​to the child component. As mentioned in the second part, the shouldComponentUpdate function can take two parameters. nextProps is the value passed by the parent component to the child component
Define an initial title data in the parent component, write a button to declare an onClick event to change the title

4.componentWillUnmount function when the component is about to be destroyed
Define in the parent component A state value with a flag of true, add a button to declare an onClick event to
change this flag to destroy the component.

Parent component code:

import React, { Component } from 'react';
import Smzq from './components/Smzq'

class App extends Component {
    constructor(props){
        super(props)
        this.state={
            flag:true,
            title:"我是app组件的标题"
        }
    }
    //创建/销毁组件
    setFlag(){
        this.setState({
            flag:!this.state.flag
        })
    }
    //改变title
    setTitle(){
        this.setState({
            title:'我是app组件改变后的title'
        })
    }
      render() {
        return (
          <div>
                {
                    this.state.flag?<smzq></smzq>:''
                }
                <button>this.setFlag()}>挂载/销毁生命周期函数组件</button>
                <button>this.setTitle()}>改变app组件的title</button>
          </div>
        );
   }
}
export default App;

Full code of child component:

import React ,{Component} from 'react'

class Smzq extends Component{
    constructor(props){
        super(props)
        this.state={
            msg:'我是一个msg数据'
        }
    }
    //组件将要挂载时候触发的生命周期函数
    componentWillMount(){
        console.log('02组件将要挂载')
    }
    //组件挂载完成时候触发的生命周期函数
    componentDidMount(){
        //Dom操作，请求数据放在这个里面
        console.log('04组件挂载完成')
    }
    //是否要更新数据，如果返回true才会更新数据
    shouldComponentUpdate(nextProps,nextState){
        console.log('01是否要更新数据')
        console.log(nextProps)      //父组件传给子组件的值，这里没有会显示空
        console.log(nextState)      //数据更新后的值
        return true;               //返回true，确认更新
    }
    //将要更新数据的时候触发的
    componentWillUpdate(){
        console.log('02组件将要更新')
    }
    //更新数据时候触发的生命周期函数
    componentDidUpdate(){
        console.log('04组件更新完成')
    }
    //你在父组件里面改变props传值的时候触发的函数
    componentWillReceiveProps(){
        console.log('父子组件传值，父组件里面改变了props的值触发的方法')
    }
    setMsg(){
        this.setState({
            msg:'我是改变后的msg数据'
        })
    }
    //组件将要销毁的时候触发的生命周期函数，用在组件销毁的时候执行操作
    componentWillUnmount(){
        console.log('组件销毁了')
    }
    render(){
        console.log('03数据渲染render')
        return(
            <div>
                生命周期函数演示--{this.state.msg}--{this.props.title}
                <br>
                <hr>
                <button>this.setMsg()}>更新msg的数据</button>
            </div>
        )
    }
}
export default Smzq

点击挂载/销毁生命周期函数组件这个按钮的时候
子组件消失，控制台打印：组件销毁了。

当父组件给子组件传值时

这里nextProps这个就有上图划红线的值了。
那么我们再点击改变app组件的title这个按钮

这里可以看到componentWillReceiveProps这个函数被触发了，nextProps这个值也发生了改变。

到这里就全部结束了，可能写的不够清晰，不知道有没有人能看完，over。

推荐学习：《react视频教程》

The above is the detailed content of What are the life cycle functions of react?. For more information, please follow other related articles on the PHP Chinese website!