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>        )    }}

运行结果如下图