最近兄弟團隊讓我去幫忙優化兩個頁面，前端用的react全家桶，後端用的python，上一次寫react**都過去一年了，順著以前的的學習思路，再捋順一下react的要點
元件的生命週期就是reac的工作過程，就好比人有生老病死，自然界有日月更替，每個元件在網頁中也會有被建立、更新和刪除，如同有宣告的機體一樣
----《深入淺出react和redux》程墨
react的生命週期可以分為三個過程
裝載過程（mont），就是元件在第一次在dom樹中渲染的過程
更新過程（update），元件被重新渲染的過程
解除安裝過程（unmount），元件從dom中被移除的過程
一 、裝載過程
依次呼叫如下過程 constructor、getinitialstate、getdefaultprops、componentwillmont、render、componentdidmount
1、constructor
就是es6裡的建構函式，建立乙個元件類的例項，在這一過程中我們要進行兩步操作：初始化state，繫結成員函式的this環境
2、getinitialstate和getdefaultprops
這個兩個過程可以不去深究，只會在用到react.createclass方法創造的元件類才會發生作用，所以在es6的方法定義的react元件中根本不會用到
3、render
不誇張的說render是react元件中最為重要的乙個函式。這個react中唯一不可忽略的函式，在render函式中，只能有乙個父元素。
其中需要深入分析的是：render函式是乙個純函式，他並不進行實際上的渲染動作，他只是乙個jsx描述的結構，最終是由react來進行渲染過程，render函式中不應該有任何操作，對頁面的描述完全取決於this.state和this.props的返回結果，不能在render呼叫this.setstate
有乙個公式總結的非常形象ui=render（data）
4、componenwillmonunt和componentdidmount
這兩個函式分別在render前後執行，componentwillmonut顯得有些雞肋，還沒有任何東西展示，操作完全可以提前到constructor中來進行
但是componentdidmount函式作用就大得多，由於這一過程通常只能在瀏覽器端呼叫，所以我們在這裡獲取非同步資料，而且在componentdidmount呼叫的時候，元件已經被裝載到dom樹上了，還有，可以在這裡執行其他庫的**，比如jquery（很皮~）
二、更新過程
簡單來說就是props和state被修改的過程，依次呼叫compwillreceiveprops、shouldcomponentupdate、componentwillupdate、render、componentdidupdate
1、componentwillreceiveprops（nextprops）
並不是只有在props發生改變的時候才會被呼叫，實際上只要是父元件的render函式被呼叫，render裡面被渲染的子元件就會被更新，不管父元件傳給子元件的props有沒有被改變，都會觸發子元件的componentwillreceiveprops過程，但是，this.setstate方法的觸發過程不會呼叫這個函式，因為這個函式適合根據新的props的值來計算出是不是要更新內部狀態的state。
2、shouldcomponentupdate（nextprops， nextstate）
這個函式的重要性，僅次於render，穩坐第二把交椅，render函式決定了改渲染什麼，而shouldcomponentupdate決定了不需要渲染什麼，這兩位大佬都需要返回函式，這一過程可以提高效能，忽略掉沒有必要重新渲染的過程
3、componentwillupdate和componentdidupdate
和裝載過程不同，這裡的componentdidupdate，既可以在瀏覽器端執行，也可以在伺服器端執行
三、解除安裝過程
這裡感覺沒啥好說的，實際中也很少用到，這裡只有乙個componentwillunmount，我最開始還很敏銳的發現，前兩個過程都有will和did倆個方法，怎麼到這裡就只有will了，後來仔細一想，連dom都已經刪除掉了，你還did幹啥。。。哈哈
在非父子元件傳值得時候，在這裡取消訂閱事件
生命週期對照表
參考資料
《深入淺出react和redux》程墨
react入門例項-阮一峰
元件生命週期|react入門教程
react：元件的生命週期
react（四）元件的生命週期
元件的生命週期 當元件第一次渲染時，依次呼叫的過程 1 constructor 1 不是所有元件均會定義該函式 2 定義該函式的目的 this.state 例如，已有成員函式clickbtn，繫結this指向的方式可以是this.clickbtn this.clickbtn.bind this 2 ...
React（三） 元件的生命週期
react元件的生命週期分為三大部分 1 掛載 mount 我們把元件渲染，並且構造dom元素插入到頁面的過程稱為元件的掛載。元件掛載的過程 元件掛載先關函式，只在元件掛載的時候呼叫，在元件更新時不會執行 import react from react class test extends reac...
react 複習（2）元件的生命週期
當元件例項被建立並插入 dom 中時，其生命週期呼叫順序如下 constructor static getderivedstatefromprops static getderivedstatefromprops nextprops,prevstate nextprops 當傳入的type發生變化的...