1. 初始化階段
- 鉤子函式個數： 4
- 主線程執行結束之後鉤子函式才會執行
鉤子函式：
constructor(){}
1.任務
-通過super來將繫結在元件身上的props賦值與this.props = props
-定義元件狀態this.state={} ,不在這裡定義的話，外面就不要寫this
-普通函式定義是可以繫結this，這樣呼叫普通函式的時候，可以直接寫this.函式名
componentwillmount(){}
1.表示元件即將掛載，用於初始化事件和生命週期
2.react內部完成任務，不干預
3.下一版本棄用
4.資料可以拿到 資料請求 修改資料
5.真實dom無法拿到，虛擬dom也無法拿到
render(){}
任務1.底層 react.createelement
2.解析 this.props和this.state
3.將jsx元素渲染為vdom物件模型，生成了虛擬dom
注意：在這各鉤子函式中不可以使用setstate
1.因為js是單執行緒的，當前已經有任務了，將jsx元素渲染為虛擬dom
2.如果在render函式解析state和props的同時，還去改變資料，會造成棧溢位
componentdidmount(){}
1.表示元件掛載結束
2.任務
-資料可以拿到 資料請求 資料修改
-真實dom可以拿到 真實dom操作/第三方庫例項化
2. 更新階段
- 鉤子函式個數： 5
- react更新階段分為兩種更新： props屬性更新/state狀態更新
- 觸發條件：setstate/foreupdate，後面這個可以渲染類的例項
- props更新走5個，state更新走4個
- 父元件狀態改變，子元件是會渲染的，但是子元件狀態改變，父元件不收影響
鉤子函式
componentwillreceiveprops(nextprops){}
-注意：這個就是和state改變的差別，state更新沒有該鉤子函式
-接受最新的屬性值，nextprops，而this.props是上一次的值
-監聽屬性是否發生改變
-應用場景：
-路由的改變，頭部.底部發生對應的變化,可以操作真實dom
-將來的17版本也會變禁用
shouldcomponentupdate(nextprops,nextstate){}
-作用：決定元件是否要更新
-它的返回值是布林值，true為更新，false為不更新
-效能優化
-可以決定元件是否要渲染，如果沒有變化就不必進行渲染
-這裡進行的是淺對比，只能比較非引用型別，引用型別要自己去寫，呼叫遞迴，但是一般不會用深比較，因為這樣做的話，效率比每次都載入還低
-淺對比是對prop或者state內的值進行對比，而不是nextprops和this.props，因為物件的位址一定不相同
- nextstate 和 this.state【新值】 是一樣的【值】，所以要自己去設定乙個值進行比較，要注意非同步的問題
- nextprops 和 this.props【舊值】
componentwillupdate(nextprops,nextstate){}
表示元件更新前的準備工作 與 componentwillmount類似，但是可以操作真實dom
將來17版本會棄用
render(){}
-初始化階段執行一次
-更新階段也會執行一次
-解析this.state和this.props
-再次生成vdom
componentdidupdate(prevprops,prevstate){}
-prevprops或者prevstate是修改後最新的值
-通過filber演算法來對比兩次的vdom，生成patch補丁物件
-根據補丁物件生成真實dom，替換原有的節點
-功能和componentdidmount類似
-真實dom操作
-資料修改
3. 解除安裝階段
- 鉤子函式個數： 1
- 觸發方式
- 外部刪除 開關
- 內部刪除 reactdom.unmountcomponentatnode(』#root』)，必須寫這個標籤，其他標籤無效，使用這個方法，所有元件全部解除安裝，包括定時器，例項之類的
- 任務
- 清除元件無法自動刪除的內容
- 例項
- 引用型別
- 計時器、定時器
- 事件
鉤子函式
componentwillunmount(){}
-在這裡手動清除自定義例項，比如定時器，事件監聽等,當然要觸發了這個函式才行，所以這是配合解除安裝元件的同時去除這些內容
-還有就是刪除這個元件的時候會觸發該解除安裝階段鉤子函式
4. 錯誤捕獲階段
- 鉤子函式個數： 1
- 觸發條件
- 父元件捕獲子元件 throw 出來的錯誤
- 作用
- 用回退ui來代替錯誤介面【斷網】
鉤子函式
componentdidcatch(error,info){}
error錯誤是什麼 info**出錯了
–當子元件出現錯誤，渲染寫好的div標籤的內容，這樣就會蓋住真實的錯誤資訊
-但是！！！一旦網路過快，一下子之後還是會顯示真實的錯誤頁面，所以這就需要將使用者此時的網路斷開，方法不是我們這邊處理
React 生命週期 生命週期方法
生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...
react 生命週期
首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...
react生命週期
盜圖一張 第一次進入頁面列印結果 1 parent constructor 2 parent conponentwillmount 3 parent render 4 initial render constructor 5 componentwillmount 6 render 7 compone...