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

一、什么是生命周期函数

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

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

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

二、生命周期流程

1、Initialization

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

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

2、Mounting

然后是组件的挂载阶段。

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

(1)componentWillMount()

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

(2)render()

组件挂载阶段

(3)componentDidMount()

组件挂载到页面之后执行

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

3、Updation

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

(1)shouldComponentUpdate()

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

(2)componentWillUpdate()

在组件更新之前，它会自动执行，但是他在shouldComponentUpdate之后执行。如果shouldComponentUpdate返回true，它会执行，否则不会执行。

(3)render()

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

(4)componentDidUpdate()

组件更新之后立即执行。

(props更新特有)componentWillRecieveProps

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

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

4、Unmounting

componentWillUnmount()

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

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

1、避免子组件不必要的重新渲染

当父组件的状态发生改变时，会自动调用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;
}
复制代码

2、发送Ajax请求

最好在componentDidMount里面发送Ajax请求。一般而言Ajax数据只需要获取一次即可，那么为什么不放在componentWillMount和render函数里面呢？

如果放在componentWillMount里面，以后如果用到了ReactNative或者服务端同构，会和其他的技术产生冲突，这里不做深入。

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

发送请求案例如下:

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

之前是Vue选手，现在来学React，小小的总结，希望能帮助大家。

转载于:https://juejin.im/post/5d07627de51d4550723b13f5