react中元件有生命週期，也就是說也有很多鉤子函式供我們使用, 元件的生命週期，我們會分為四個階段，初始化、執行中、銷毀、錯誤處理(16.3之後)
在元件初始化階段會執行
constructor
static getderivedstatefromprops()
componentwillmount() / unsafe_componentwillmount()
render()
componentdidmount()
`constructor()
通過super來繼承父類上傳遞來的屬性，然後當前元件通過 this.props接收
用來初始化乙個狀態
用來初始化繫結乙個方法。將this傳遞給這個方法
注意：不寫方法的觸發（ 訂閱 ）
不寫具有***的**（ 比如： 計時器 ）
這些應當使用componentdidmount()
4. **如下：
constructor
( props )
this
.change =
this
.change.
bind
(this
)//初始化繫結乙個方法，將this傳遞給這個方法
}
提供一次資料修改的機會（可以進行資料修改）
進行資料請求 axios和fetch
**如下：
componentwillmount()
)fetch
('/data.json'
)// 進行資料請求
.then
( res => res.
json()
).then
( data => console.
log(
'componentwillmount'
, data )).
catch
( error =>
)//雖然我們這裡可以進行資料請求和初始化資料的修改，但是官方建議我們寫在componentdidmount中可以減少***和訂閱
}
react元素。通過jsx建立，既可以是dom元素，也可以是使用者自定義的元件。
字串或數字。他們將會以文字節點形式渲染到dom中。
portals。react 16版本中提出的新的解決方案，可以使元件脫離父元件層級直接掛載在dom樹的任何位置。
null，什麼也不渲染
布林值。也是什麼都不渲染。
render()方法必須是乙個純函式，他不應該改變state`，也不能直接和瀏覽器進行互動，應該將事件放在其他生命週期函式中。
如果shouldcomponentupdate()返回false，render()不會被呼叫。
**如下：
return
'aaa'
//字串或數字。他們將會以文字節點形式渲染到dom中。
return
(//react元素。通過jsx建立，既可以是dom元素，也可以是使用者自定義的元件
標籤 <
/p>
<
/fragment>
資料請求
資料修改
將vdom物件渲染成真實dom，然後掛載到id為root的容器中
**如下：
componentdidmount()
)fetch
('/data.json'
)// 進行資料請求
.then
( res => res.
json()
).then
( data => console.
log(
'componentdidmount'
, data )).
catch
( error =>
)//重點：： 資料請求和資料修改最好寫在componentdidmount中
}
static getderivedstatefrompropsreact16.3新增 功能與componentwillmount相同
可以資料請求和資料的修改
**如下：
static
getderivedstatefromprops
(nextprops, prevstate)
}
觸發條件： 屬性發生改變，就會觸發
接收乙個引數： 屬性變化之後的值
這個鉤子函式一定能監聽到整個當前元件的屬性變化 — > 當前元件的路由我們也可以監聽到
應用：路由監聽
**如下：
componentwillreceiveprops
( nextprops )
決定了元件是否更新
返回值true,更新
返回值false,不更新
不書寫該鉤子時–預設值是true 書寫之後必須設定true或false
這個鉤子是react效能優化的關鍵鉤子
componentwillupdate() 元件即將更新
元件即將更新–生成新的vdom
getsnapshotbeforeupdate() snap ---- /snæp/
getsnapshotbeforeupdate()被調用於render之後，
可以讀取但無法使用dom的時候。
它使您的元件可以在可能更改之前從dom捕獲一些資訊（例如滾動位置）。
此生命週期第3個引數傳遞給componentdidupdate（）。
componentdidupdate() 元件更新完成
資料請求
dom操作 ----在componentdidupdate中可以獲取到dom元素
接收getsnapshotbeforeupdate()第三個引數作為返回值
使用fiber演算法進行 新vdom和舊的vdom對比，生成新的patch物件
再根據patch物件進行頁面渲染
**如下：
componentdidupdate()
) document.
queryselector
('h3'
).style.background =
'red'
//dom操作，做一些第三方庫的例項化
console.
log(
'componentdidupdate'
)}
兩種方式：
外部銷毀：通過開關
內部銷毀：reactdom.unmountcomponentatnode( document.queryselector('#root') ) //必須是root
componentdidcatch()
react16新的生命週期棄用了componentwillmount、componentwillreceiveporps，componentwillupdate
新增了getderivedstatefromprops、getsnapshotbeforeupdate來代替棄用的三個鉤子函式（componentwillmount、componentwillreceiveporps，componentwillupdate）
react16並沒有刪除這三個鉤子函式，但是不能和新增的鉤子函式（getderivedstatefromprops、getsnapshotbeforeupdate）混用，react17將會刪除componentwillmount、componentwillreceiveporps，componentwillupdate
新增了對錯誤的處理（componentdidcatch）
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...