React生命週期詳解及適用場景

2021-08-15 02:51:30 字數 1913 閱讀 2016

constructor(建構函式)

只有在元件例項化並插入到 dom 中的時候才會被呼叫。元件例項 化的過程稱作元件的掛載(mount)。

它在元件初始化時被呼叫。在這個方法中,你可以設定初始化狀態以及繫結類方法

componentwillmount()

它在 render() 方法之前被呼叫。這就是為什麼它可以用作去設定元件內部的狀態,因為它不會觸發元件的再次渲染。但一般來說,還是推薦在constructor() 中去初始化狀態

render()

該方法會在元件被掛載過程中被呼叫,同時當元件被更新的時候也會被呼叫,每當元件的狀態 (state)或屬性 (props)改變時,元件的 render() 方法都會被呼叫

這個生命週期方法是必須有的,它返回作為元件輸出的元素。這個方法應該是乙個純函式,因此不應該在這個方法中修改元件的狀態。它把屬性和狀態作為輸入並且返回(需要渲染的)元素

componentdidmount()

它僅在元件掛載後執行一次。這是發起非同步請求去 api 獲取 資料的絕佳時期。獲取到的資料將被儲存在內部元件的狀態中然後在 render() 生命 週期方法中展示出來。

componentwillreceiveprops(nextprops)

這個方法在乙個更新生命周(updatelifecycle) 中被呼叫。新的屬性會作為它的輸入。因此你可以利用 this.props 來對比之後的屬性和之前的屬性,基於對比的結果去實現不同的行為。此外,你可以基於新的屬性 來設定元件的狀態。

shouldcomponentupdate(nextprops, nextstate)

每次元件因為狀態或者屬性更改而更新時,它都會被呼叫。你將在成熟的 react 應用中使用它來進行效能優化。在乙個 更新生命週期中,元件及其子元件將根據該方法返回的布林值來決定是否重新渲染。 這樣你可以阻止元件的渲染生命週期(render lifecycle)方法,避免不必要的渲染。

componentwillupdate(nextprops, nextstate)

這個方法是 render() 執行之前的最後 乙個方法。你已經擁有下乙個屬性和狀態,它們可以在這個方法中任由你處 置。你可以利用這個方法在渲染之前進行最後的準備。注意在這個生命週期方法中你不能再觸發 setstate()。如果你想基於新的屬性計算狀態,你必須利用 componentwillreceiveprops()。

componentdidupdate(prevprops, prevstate)

這個方法在 render() 之後立即呼叫。你可以用它當成操作 dom 或者執行更多非同步請求的機會。

componentwillunmount()

它會在元件銷毀之前被呼叫。你可以利用這個生命週期 方法去執行任何清理任務。

componentdidcatch(error, info)錯誤處理

它在 react 16 中引入,用來 捕獲元件的錯誤。舉例來說,在你的應用中展示樣本資料本來是沒問題的。但是可能會有列表的本地狀態被意外設定成 null 的情況發生(例如從外部 api 獲取列表失敗時,你把本 地狀態設定為空了)。然後它就不能像之前一樣去過濾(filter)和對映(map)這個列表,使用真實的 api因為它不是乙個空列表()而是 null。這時元件就會崩潰,然後整個應用就會掛掉。現在你可以用 componentdidcatch() 來捕獲錯誤,將它存在本地的狀態中,然後像使用者展示一 條資訊,說明應用發生了錯誤。

React生命週期詳解

前言 學習react,生命週期很重要,我們了解完生命週期的各個元件,對寫高效能元件會有很大的幫助.ract生命週期 react 生命週期分為三種狀態 1.初始化 2.更新 3.銷毀 初始化 1 getdefaultprops 設定預設的props,也可以用dufaultprops設定元件的預設屬性....

react生命週期詳解

1 生命週期指的是元件從初始化開始到結束的過程 或者是生命週期是描述react元件從開始到結束的過程 2 每個react元件都具有生命週期 3 react都對元件通過生命週期給予的鉤子函式進行管理 指的是系統某些狀態和引數發生改變的時候,系統立馬去通知對應處理的函式 叫做鉤子函式。一方面有變動。另一...

React生命週期詳解

react生命週期 一 舊版 二 新版 從圖中,我們可以清楚知道react的生命週期分為三個部分 例項化 存在期和銷毀時。舊版生命週期如果要開啟async rendering,在render函式之前的所有函式,都有可能被執行多次。舊版的react生命週期看圖就可以啦,我們就不詳細講解了,下面我們來詳...