[三元學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，小小的總結，但願能幫助你們。