React生命周期 | 易学教程

React生命周期：
       在react中，生命周期函数指的是组件在某一时刻会自动执行的函数。
       constructor虽然也会自动执行，但不是react所独有的，可以理解成普通的类的生命周期函数
       render当数据发生变化时，render函数会被自动执行，他就是一个react生命周期函数
Initialization: 组件初始化的过程，设置属性和数据，没有用到任何生命周期函数

Mounting: 依次执行接下来的三个函数

componentWillMount（挂载前自动执行）
render（渲染时自动执行；组件更新之前 componentWillUpdate后自动执行）
componentDidMount（挂载后自动执行）

       页面挂载的阶段，也就是说你有了数据之后，需要把数据对应的页面展示到html上面
       数据发生变化时，页面也会跟着变
       数据发生变化了，不会重新执行Mounting这个过程。React中，只有当你的组件第一次渲染到页面的时候，才会执行Mounting这个过程
Updation
当数据发生了变化，react会执行updation更新过程，即props和state更新生命周期

componentWillReceiveProps（props独有的props变化时执行。子组件接收父组件参数，父组件render重新执行那么子组件中的这个生命周期就会执行！）
shouldConpomentUpdate（组件更新前，必须要返回一个布尔值。当为false时，数据发生变化，页面不变，后面的生命周期函数不会执行，可以提高组件更新的性能，为true更新）
componentWillUpdate（组件更新之前 shouldComponentUpdate后自动执行）
render
componentDidUpdate（组件更新前 render后自动执行）

Unmounting

componentWillUnmount（组件从页面中移除前自动执行）

总结：
       首先，生命周期函数是针对组件来说的，不管是子组件还是父组件，都会有自己组件内部的生命函数。
       当组件第一次被渲染的时候，这个过程叫做Mounting（挂载的过程）会依次执行constructor–>componentWillMount–>render–>componentDidMount
       接着，如果你改变了一个组件的数据，假设改变的是父组件的数据，那么会依次执行shouldComponentUpdate–>componentWillUpdate–>render–>componentDidUpdate，假设子组件接收到的外部的props属性发生了变化，子组件会多执行一个生命函数componentWillReceiveProps
       最后，当一个组件从页面中，即将被移除的时候，componentWillUnmount会自动执行
父组件：

import React, { Component,Fragment } from 'react';
import Number from './number';
//在React中，生命周期函数指的是组件在某一时刻会自动执行的函数
//当数据发生变化时，render函数会被自动执行，他就是一个react生命周期函数
class Counter extends Component{
    handleClick(){
        const newNumber = this.state.number+1;
        this.setState({
            number:newNumber
        })
    }
    //可以理解成普通的类的生命周期函数
    constructor(props){
        console.log('constructor');
        super(props);
        this.handleClick=this.handleClick.bind(this);
        this.state={
            number:1
        }
    }
    
    // 挂载前自动执行
    componentWillMount(){
        console.log('componentWillMount')
    }

    //渲染时自动执行
    //组件更新之前 componentWillUpdate后 自动执行
    render(){
        console.log('render');
        return(
            <div>
                <div onClick={this.handleClick}>hello world</div>
                <Number count={this.state.number}/>
            </div>
            
        )
    }

    //挂载后自动执行
    componentDidMount(){
        console.log('componentDidMount');
    }

    //组件更新前 自动执行
    //存在的意义：假设有的时候数据发生变化，页面不需要改变，设置return为false
    //即数据发生变化，页面不变，，后面的生命周期函数都不会执行可以提高组件更新的性能
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        // 需要自动返回一个布尔值
        return true;
    }

    //组件更新之前 shouldComponentUpdate之后 自动执行
    componentWillUpdate(){
        console.log('componentWillUpdate');
    }
    
    //组件更新前 render后 自动执行
    componentDidUpdate(){
        console.log('componentDidUpdate');
    }

    //组件从页面中移除前自动执行
    componentWillUnmount(){
        console.log('componentWillUnmount');
    }
}
export default Counter;

子组件

import React,{Component} from 'react';

class Number extends Component{

    componentWillReceiveProps(){
        console.log('child componentWillReceiveProps');
    }

    componentWillMount(){
        console.log('child componentWillMount');
    }
    render(){
        console.log('child render');
        return <div>{this.props.count}</div>
    }
    componentDidMount(){
        console.log('child componentDidMount');
    }
}
export default Number;

来源：CSDN

作者：saiyi绒小花

链接：https://blog.csdn.net/qq_34634181/article/details/104008276

标签

react

react生命周期