阅读 541

[三元学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,小小的总结,希望能帮助大家。

关注下面的标签,发现更多相似文章
评论