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

运行结果如下图