React组件的生命周期

React中组件的生命周期函数，又叫钩子函数

React的生命周期分两类来说明

一、从组件的一般挂载与卸载的过程来分
二、从组件数据更新过程来划分

从组件的一般挂载与卸载的过程来分 ：

1. constructor ES6创建方式中的构造函数,在组件实例化的时候就会调用，创建组件的时候会默认添加constructor函数，如果你要添加state状态等的就要手动添加，不然可以省去。
2. componentWillMount 组件渲染前调用的钩子函数，一般在这个钩子函数里面设置state或者请求数据给state赋值
3. render渲染组件的钩子函数，可以说是每个组件都要用的钩子函数(无状态组件)直接return
4. componentDidMount组件渲染之后调用的钩子函数。一般用处:获取真实的DOM元素节点(原生js操作DOM)，进行DOM操作
5. componentWillUnmount组件卸载的时候调用的钩子函数。一般作用在componentDidMount钩子函数中进行的事件绑定的移除。

code代码见下面

import React, {Component} from 'react';
export default class App extends Component {
    constructor(props) {
        super(props);
        console.time();
        console.log('我是constructor方法');
        console.timeEnd();
    }
    //组件渲染前
    componentWillMount() {
        console.time();
        console.log('我是componentWillMount方法');
        console.timeEnd();
    }
    render() {
        console.time();
        console.log('我是render方法')
        console.timeEnd();
        return (
            <div></div>
        )
    }
    //组件渲染之后
    componentDidMount() {
        console.time();
        console.log('我是componentDidMount方法');
        console.timeEnd();
        //console.log(dom);
    }
    componentWillUnmount(){
        console.log("组件卸载");
    }
}

在浏览器中运行结果

从组件数据更新过程来划分(前提先抛开上面的根据过程的生命周期)

1. componentWillReceiveProps(nextProps)获取父组件才会执行的钩子函数
2. shouldComponentUpdate(nextProps,nextState)重新设置state的值的时候就会调用，在默认情况下，showComponentUpdate函数都返回true
3. componentWillUpdate在组件渲染前调用
4. componentDidUpdate在组件渲染之后调用

代码详见

import React, {Component} from 'react';
import {getJson} from './Utils';
export default class App extends Component {
    constructor(props) {
        super(props);
        console.time();
        console.log('我是constructor方法');
        console.timeEnd();
        this.state= {
            data:''
        }
    }
    //组件挂载之前的
    componentWillMount() {
        console.time();
        console.log('我是componentWillMount方法');
        console.timeEnd();
        //getJson是自己封装的fetch请求的数据方式
        getJson('http://www.xxxxx.com/mobile.php?c=Product&a=category',(response)=>{
            let {errmsg,data} = response;
            if(errmsg == '成功'){
                this.setState({
                    data:data
                })
            }
        })
    }
    //父组件更新props的时候子组件会优先shouldComponentUpdate前调用componentWillReceiveProps钩子函数
    componentWillReceiveProps(nextProps){
        console.log(`我是componentWillReceiveProps函数--${nextProps}`);
        return true;
    }
    //setState后都会调用shouldComponentUpdate判断是否需要重新
    shouldComponentUpdate(nextProps,nextState){
        console.log(`我是shouldComponentUpdate函数--${nextProps}---${nextState}`);
        //console.log(JSON.stringify(nextProps))
        return true;
    }
    //shouldComponentUpdate返回true或者调用forceUpdate之后
    componentWillUpdate(nextProps,nextState){
        console.log(`我是componentWillUpdate函数--${nextProps}---${nextState}`);
        return true;
    }
    componentDidUpdate(nextProps,nextState){
        console.log(`我是componentDidUpdate函数--${nextProps}---${nextState}`);
        return true;
    }
    render() {
        console.time();
        console.log('我是render方法')
        console.timeEnd();
        return (
            <div></div>
        )
    }
}

运行结果如下图