再一次深刻了解react的生命週期

1、原由
記得在2017年4月，曾經在本身的博客中寫過一篇react-lifeCycle，有興趣的朋友能夠回顧下！現在到如今react的版本已經發生了太多的變化，因此又再一次從新認識一下生命週期

借用官網的一張圖

從上圖中能夠大概的看出整個生命週期的組成和構成以及運行的順序，掌握這些對於react代碼的書寫有很重要的做用，好比什麼時候更新，什麼時候銷燬，什麼時候注意性能等等一系列的問題，下面要說的就是舉例說明了；
如今書寫組建基本上都是使用ES6的方法或者是stateless的方法，這裏用ES6方法來說：
一、static defaultProps = {} - 初始化props的地方
二、static propTypes = {} - 檢測或要求props類型的地方

有的將此屬性書寫在組建外部，之前這個檢測的方法是在react點下，現在已經將這一部分移除來成爲了一個單獨的插件prop-types

三、構造方法

constructor(props){
    super(props)
    this.state = {}
}
構造方法自己其實就是構造函數的自己，在ES5中是沒有繼承的寫法的，所以經過prototype來達到目的,例如
    //構造函數People
   function People (name,age){
        this.name = name;
        this.age = age
    }
    People.prototype.sayName = function(){
        return '個人名字是：'+this.name;
    }
    let p1 = new People('harrisking',23);
    console.log(p1.sayName()) //個人名字是：harrisking
在ES6中能夠這樣來實現
    class People{
        //構造方法constructor就等於上面的構造函數People
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        sayName(){
            return '個人名字是：'+this.name;
        }
    }
    //建立新的子類p1
    let p1 = new People('harrisking',23);
    console.log(p1.sayName()) 
上面兩種是同樣的
而super()是用來繼承父類的this的對象，若是不寫就會得不到this，那麼在構造函數中書寫this.state就會報錯。
有些人會在構造函數中書寫綁定事件到this上，以下
this.handle = this.handle.bind(this),這在方法中是沒有寫箭頭函數或者避免在d標籤中綁定this（<div onClick={this.handle.bind(this)} ></div>）
若是要在其中使用this.props就必需要在構造函數中加參數props

固然你也能夠不寫這個構造函數，在render中是有this的，這個是react自帶的

四、componentWillMount
五、render
六、componentDidMount
至此初始化時應該用到的週期就是這些；

2、週期舉例
運行時週期的順序以例子來說明：
父組建IndexPage 子組建Son

直接來看瀏覽器的運行結果

初始化階段的順序爲will --- render ---- Mount遇到子組建先執行子在執行父

當咱們點擊Welcome to Here的時候週期順序如圖

在父組建中調用setState後就會走render週期，子組建就會接收新的props進入componentWillReceiveProps週期，而後決定是否進行更新子組建週期shouldComponentUpdate,返回true則更新，返回false不跟新，這裏通常用於優化做用，當返回true時進入即將更新階段componentWillUpdate階段而後render，最後進入更新後階段componentDidUpdate
(

shouldComponentUpdate週期用於優化react項目的性能，能夠選擇更新或不更新，官網也推出了react的另一個屬性PureComponent,
即class Son extent React.PureComponent，用這個屬性來代替手寫shouldComponentUpdate, 可是它只是對屬性進行淺比較，若是屬性的層級太深就只能進行手動了

)

當咱們點擊Son組建中的button的時候，看看內部週期是怎樣的順序

週期仍然於更新同樣，這裏不在贅述了

3、卸載週期 componentWillUnmount
常在此週期中進行定時器的銷燬，或者引用外部對象的銷燬（destroy）;

每次熟悉一遍就有一遍的收穫！學以至用，知情分享！樂在其中！