React-生命週期

每個生物都有它自己的生命週期，從出生、少年、成年再到死亡。同理，組件也有它特定的生命週期，React用不同的方法來描述它的整個生命週期。

下面是定義一個react組件的結構：

import React, { Component } from 'react';class Test extends Component {    constructor(props, context) {        super(props, context)        this.state = {            //定義state        }    }    componentWillMount() {}    componentDidMount() {}    componentWillReceiveProps(nextProps) {}    shouldComponentUpdate(nextProps, nextState) {}    componentWillUpdate(nextProps, nextState) {}    componentDidUpdate(prevProps, prevState) {}    render() {        return(            <div></div>        )    }    componentWillUnmount() {}}export default Demo;

下面進行各生命週期的詳解：

生命週期

1）getDefaultProps： 在裝載之前調一次，在組件中賦值的資料會被設定到this.props中；

2）getInitialState: 調用在裝載之前，這個函數的傳回值會被設定到this.state中。在ES6的寫法中，只需寫在constructor中即可；

  class Demo extends Component {        constructor(props, context) {//只要組件存在constructor，就必須要寫super，否則this指向會錯誤            super(props, context)            this.state = {                //定義state            }        }  }     

3）componentWillMount： 在render之前被調用，可以在渲染前做一些準備工作（一般用在服務端渲染）；

4）componentDidMount： 組件第一次渲染完成，此時dom節點已經產生，可以在這裡調用ajax請求，返回資料setState後組件會重新渲染；

5）componentWillReceiveProps: 在接受父組件改變後的props需要重新渲染組件時用到的比較多，它接收一個nextProps參數，通過對比nextProps和this.props，將nextProps setState設定為當前的state，從而重新渲染組件；

6）shouldComponentUpdate： 在重新render之前被調用，會返回一個Boolean值，false時為阻止組件的更新；註：因為react父組件重新渲染會導致其所有子組件的重新渲染，這個時候我們可能並不需要左右的子組件跟著重新渲染，因此需要在子組件的該生命週期中做判斷；

7）componentWillUpdate:在render調用之前，可以渲染一些準備工作，當 shouldComponentUpdate返回true時，組件進入重新渲染的過程；

8）render： render函數會插入jsx產生的dom結構，react會產生一份虛擬dom樹，在每一次組件更新時，在此react會通過其diff演算法比較更新前後的新舊dom樹，比較之後，找到最小的有差異的dom節點，並會重新渲染；

9）componentDidUpdate： 組件更新完成後立即調用，可以拿到更新前的props和state；

10）componentWillUnmount： 組件卸載，可以做一些清理工作。如：clear組件中的setTimeout、setInterval；移除組件中的監聽removeEventListener