React生命週期函式

2021-08-22 12:00:40 字數 1547 閱讀 6018

說來慚愧,準大四計算機專業學生黨第一次寫技術部落格。

以前學東西沒有記錄的習慣總是容易忘記。

最近在看老師的教程學習react框架,想寫點東西記錄一下學習的過程。

若寫的不好,各位大佬見諒了,歡迎指正。

什麼是生命週期函式?

生命週期函式就是元件某一時刻會自動執行的函式。

initialzation:    初始化

mounting:       元件被掛載

updation:       元件被更新

unmounting:  元件被移除

接下來我會對每個生命週期函式函式寫測試用例:

父元件內:

//元件被掛載之前,自動執行

componentwillmount()

//元件被掛載之後,自動執行

componentdidmount()

//元件渲染到頁面上的時候,自動執行

render()

//元件被更新前,自動執行

//返回值為true元件可被更新

//返回值為false元件不可被更新

shouldcomponentupdate()

//元件被更新前,自動執行,但在shouldcomponentupdate之後

//如果shouldcomponentupdate為true,它才執行,否則不執行

componentwillupdate()

//元件更新完,自動執行

componentdidupdate()

子元件內:

//當乙個元件從父元件接收引數時

//如果這個元件第一次存在父元件中,不執行

//如果這個元件之前已經存在父元件中,才會執行。

componentwillreceiveprops()

//當乙個元件即將被從頁面中剔除的時候,自動執行

componentwillunmount()

好,接下來根據我之前所寫好的react元件測試**來看一下結果。

React 生命週期函式

initialization 初始化 mounting 掛載 updation 更新 unmounting setup componentwillmount props states componentwillunmont 當這個元件即將被從頁面中移除的時候,會被執行 props render co...

react生命週期函式

生命週期函式 某一時刻元件會自動呼叫執行的函式 render也是 initialization 初始化 constructor裡 mounting 掛載 componentwillmount 接下來render 生命週期函式的使用場景 不可缺少的乙個生命週期函式是render 效能優化 減少無謂的渲...

react生命週期函式

和vue一樣react也有在某乙個時刻會對應執行的生命週期函式。這裡我將react的生命週期分為三大部分 初始化生命週期 compionentwillmount 元件即將被掛載到頁面前執行 render 元件渲染 componentdidmount 元件掛載到頁面上時執行 props和state更新...