[三元学React]React组件的生命周期函数

1、什么是生命周期函数

生命周期函数指在某一个时刻组件会自动调用执行的函数

问题：constructor是否是生命周期函数？

constructor也是组件在某一个时刻会调用的方法，可是它是ES6语法的一部分，并非react组件的特性，所以不算做react组件的生命周期函数。

2、生命周期流程

一、Initialization

首先是Initialization,初始化state和props的数据，在constructor函数中会接收props、初始化state和一些方法。如:

constructor(props) {
    super(props);
    this.state = { 
        inputValue: '',
        list: []
    }
    this.handleBtnClick = this.handleBtnClick.bind(this)
}
复制代码

二、Mounting

而后是组件的挂载阶段。

什么是挂载？挂载是组件第一次被放到页面上的时候。

(1)componentWillMount()

在组件即将被挂载到页面的时候自动执行

(2)render()

组件挂载阶段

(3)componentDidMount()

组件挂载到页面以后执行

注意: componentWillMount和componentDidMount在组件的生命周期执行一次

三、Updation

更新包括props的更新和state的更新。 二者具备一些共同的生命周期钩子。

(1)shouldComponentUpdate()

组件在更新前，会自动被执行，这个钩子函数返回一个布尔值，来决定组件以后是否被更新。

(2)componentWillUpdate()

在组件更新以前，它会自动执行，可是他在shouldComponentUpdate以后执行。 若是shouldComponentUpdate返回true，它会执行，不然不会执行。

(3)render()

将新虚拟DOM与原来的进行比对(diff)，而后修改真实DOM。

(4)componentDidUpdate()

组件更新以后当即执行。

(props更新特有)componentWillRecieveProps

不过props更新了会另外执行一个生命周期函数componentWillRecieveProps,那么它在何时执行呢？

若是一个组件从父组件接受了数据，只要父组件的render函数被从新执行了，那么这个componentWillRecieveProps才会被执行。这个生命周期函数不是太经常使用。

四、Unmounting

componentWillUnmount()

在组件即将被移除的时候执行。

3、生命周期函数的使用场景

一、避免子组件没必要要的从新渲染

当父组件的状态发生改变时，会自动调用render函数，从而调用子组件的render函数，可是在有些时候父组件这些改变的状态和子组件没有关系，所以子组件没有必要从新调用render，浪费浏览器性能。怎么解决这个问题？

很简单，在子组件的shouldComponentUpdate这里拦截一下, 以下：

//接受两个参数，分别是新传进来的props和state
shouldComponentUpdate(nextProps, nextState) {
    //进行相关变量的比对，若是不同则更新
    if(nextProps.xxx !== this.props.xxx){
        return true;
    }
    return false;
    //也能够简化为:
    //return nextProps.xxx !== this.props.xxx ? true : false;
}
复制代码

二、发送Ajax请求

最好在componentDidMount里面发送Ajax请求。通常而言Ajax数据只须要获取一次便可，那么为何不放在componentWillMount和render函数里面呢？

若是放在componentWillMount里面，之后若是用到了ReactNative或者服务端同构，会和其余的技术产生冲突，这里不作深刻。

若是放在render函数里面，事实上render在组件的生命周期中是常常被执行的，那么这个请求也会发送很是屡次，也并不合理。

发送请求案例以下:

import axios from 'axios'
//省略1000行代码
componentDidMount() {
    axios.get('/api/data')
        .then(() => {})
        .catch(() => {})
}
复制代码

以前是Vue选手，如今来学React，小小的总结，但愿能帮助你们。