關於react生命週期

2022-08-28 16:51:12 字數 998 閱讀 2594

react生命週期有三種狀態1初始化2更新3銷毀

初始化階段

設定元件的預設屬性,也可以defaultprops:{}設定

es6中直接繼承component類,使用this.state={},此時可以訪問this.props

渲染之前呼叫,既在客戶端也在服務端

react最重要的步驟,建立虛擬dom渲染ui,此時不能修改state;

首次渲染之後呼叫,該階段呼叫ajax請求,防止非同步操作阻塞ui。官方推薦此時請求資料

if (this.props.sectionlist !== nextprops.sectionlist && this.props.leftkeycode !== nextprops.leftkeycode)

初始化時不呼叫,元件接受新的props時呼叫,只有存在props更新才呼叫該事件鉤子,此時setstate是安全的,

react效能優化非常重要的一環,元件接收新的props,state時呼叫,比較之前的state和props是否相同,相同返回false阻止更新,此鉤子節省大量效能。

元件初始化時不呼叫,元件將更新時進行呼叫,此時可以修改state,但可能出現迴圈呼叫,耗盡記憶體

元件初始化時不呼叫,元件更新完成時呼叫。呼叫setstate,可能會造成死迴圈,所以要限制好setstate的條件

元件將要解除安裝時呼叫,一些事件監聽和定時器需要在此時清除

用來捕獲元件的錯誤,react16新新增的

以下兩種情況

1  屬性props改變

先  componentwillreceiveprops  然後    shouldcomponentupdate

2  狀態state改變

先  shouldcomponentupdate   決定要不要   componentwillupdate

log列印順序   1外層   2constructor   3componentwillmount

4render   5conponentdidmount   6非同步請求 

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...