What are the three processes of react life cycle

The three processes of the react life cycle: 1. The mounting period, also called the instantiation period, is the process when a component instance is created for the first time; 2. The update period, also called the existence period, is the component The process of rendering again after creation; 3. The unloading period, also called the destruction period, is the process in which components are destroyed after use.

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

What are the three processes of the react life cycle

The life cycle of React is broadly divided into three stages: mounting, rendering, and uninstalling

From birth to growth , and finally to death, the time of this process can be understood as the life cycle. The life cycle of React is also such a process.

The life cycle of React is divided into three stages: mounting period (also called instantiation period), update period (also called existence period), and uninstallation period (also called destruction period). React provides some hook functions in each cycle.

The life cycle is described as follows:

• Mounting period: the process of initial creation of a component instance.

• Update period: The process of rendering the component again after it is created.

• Uninstallation period: The process in which components are destroyed after use.

Mounting of components:

After the component is first created, the first rendering is the mounting period. Some methods during the mounting period will be triggered in sequence, listed as follows:

• constructor(constructor, initialization state value)
• getInitialState(set state machine)
• getDefaultProps(Get default props)
• UNSAFE_componentWillMount(Executed before first rendering)
• render(Rendering component)
• componentDidMount(Render operation executed after rendering)

//组件挂载import React from 'react';import ReactDOM from 'react-dom';class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        this.state={};
        console.log("2,设置状态机");
    }
    static defaultProps={
        name:"React",
    }
    UNSAFE_componentWillMount(nextProps, nextState, nextContext) {
        console.log("3,完成首次渲染前调用");
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <p>
                </p><p>{this.props.name}</p>
            
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render渲染后的操作")
    }}ReactDOM.render(<helloworld></helloworld>, document.getElementById('root'));

Component update:
Component update refers to the change in component state after the component is rendered for the first time. React's update process in the life cycle includes the following methods:

• UNSAFE_componentWillReceiveProps: This method will be called when the parent component updates the child component state.
• shouldComponentUpdate: This method determines whether changes in component state or props require the component to be re-rendered.
• UNSAFE_componentWillUpdate: This method is called when the component accepts new state or props, just before re-rendering, similar to the UNSAFE_componentWillMount method.
• componentDidUpdate: This method is called after the component is re-rendered, similar to the componentDidMount method.

//组件更新class HelloWorldFather extends React.Component{
    constructor(props) {
        super(props);
        this.updateChildProps=this.updateChildProps.bind(this);
        this.state={  //初始化父组件
            name:"React"
        }
    }
    updateChildProps(){  //更新父组件state
        this.setState({
            name:"Vue"
        })
    }
    render() {
        return (
            <p>
                <helloworld></helloworld>  {/*父组件的state传递给子组件*/}
                <button>更新子组件props</button>
            </p>
        )
    }}class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        console.log("2,设置状态机")
    }
    UNSAFE_componentWillMount() {
        console.log("3,完成首次渲染前调用");
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        console.log("6,父组件更新子组件时调用该方法");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("7,决定组件props或者state的改变是否需要重新进行渲染");
        return true;
    }
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        console.log("8,当接收到新的props或state时，调用该方法");
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <p>
                </p><p>{this.props.name}</p>
            
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render后的操作");
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("9,组件被重新选然后调用该方法");
    }}ReactDOM.render(<helloworldfather></helloworldfather>,document.getElementById("root"));

After clicking "Update subcomponent props":

Uninstalling the component:
The last process of the life cycle is the component uninstallation period, also known as the component destruction period. This process mainly involves one method, componentWillUnmount, which is called when the component is deleted from the DOM tree.

//组件卸载class HelloWorldFather extends React.Component{
    constructor(props) {
        super(props);
        this.updateChildProps=this.updateChildProps.bind(this);
        this.state={  //初始化父组件
            name:"React"
        }
    }
    updateChildProps(){  //更新父组件state
        this.setState({
            name:"Vue"
        })
    }
    render() {
        return (
            <p>
                <helloworld></helloworld>  {/*父组件的state传递给子组件*/}
                <button>更新子组件props</button>
            </p>
        )
    }}class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        console.log("2,设置状态机")
    }
    UNSAFE_componentWillMount() {
        console.log("3,完成首次渲染前调用");
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        console.log("6,父组件更新子组件时调用该方法");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("7,决定组件props或者state的改变是否需要重新进行渲染");
        return true;
    }
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        console.log("8,当接收到新的props或state时，调用该方法");
    }
    delComponent(){  //添加卸载方法
        ReactDOM.unmountComponentAtNode(document.getElementById("root"));
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <p>
                </p><p>{this.props.name}</p>
                <button>卸载组件</button>  {/*声明卸载按钮*/}
            
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render后的操作");
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("9,组件被重新选然后调用该方法");
    }
    componentWillUnmount() {  //组件卸载后执行
        console.log("10,组件已被卸载");
    }}ReactDOM.render(<helloworldfather></helloworldfather>,document.getElementById("root"));

After clicking the uninstall button:

Overview component life cycle:

[Related recommendations: javascript video tutorial, web front-end]

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