react生命週期函式

2021-09-21 13:42:27 字數 1642 閱讀 2881

和vue一樣react也有在某乙個時刻會對應執行的生命週期函式。

這裡我將react的生命週期分為三大部分

初始化生命週期

compionentwillmount(元件即將被掛載到頁面前執行)

render(元件渲染)

componentdidmount(元件掛載到頁面上時執行)

props和state更新生命週期

componentwillreceiveprops(props獨有的props變化時執行。子元件接收父元件引數,父元件render重新執行那麼子元件中的這個生命週期就會執行!)

shouldconpomentupdate(元件即將更新之前必須要返回乙個booleans當為false不更新檢視且沒有後面的生命週期,為true更新)

componentwillupdate(元件更新之前執行並且在shouldcomponentupdate之後)

render

componentdidupdate(元件更新完成執行)

解除安裝生命週期

componentwillunmount(元件解除安裝時執行)

下面是學習過程的demo每個生命週期列印對應的生命週期的名字。生命週期對於react是非常重要的,要想學好react必須要了解它的生命週期。

父元件

import react, from 'react';

import item from './components/item'

constructor ()

} inputchange (event) )

this.setstate(,() => )

} //元件即將被掛載到頁面前執行

componentwillmount ()

//元件渲染

render () }

/>

);} //元件掛載到頁面上時執行

componentdidmount ()

//子元件擁有props才有的生命週期(父元件沒有)

componentwillreceiveprops ()

//元件即將更新之前必須要返回乙個booleans當為false不更新檢視且沒有後面的生命週期,為true才更新

shouldcomponentupdate ()

//元件更新之前執行並且在shouldcomponentupdate之後

componentwillupdate ()

//元件更新完成時候執行

componentdidupdate ()

//解除安裝元件時執行

componentwillunmount ()

}

子元件

import react, from 'react'

class item extends component

} render ()

)} //子元件擁有props才有的生命週期(父元件沒有)

componentwillreceiveprops ()

//解除安裝元件時執行

componentwillunmount ()

}export default item

果然前端三大框架中的任意一種學會了再去學其他的就知道該怎麼入手。加油!!!

React生命週期函式

說來慚愧,準大四計算機專業學生黨第一次寫技術部落格。以前學東西沒有記錄的習慣總是容易忘記。最近在看老師的教程學習react框架,想寫點東西記錄一下學習的過程。若寫的不好,各位大佬見諒了,歡迎指正。什麼是生命週期函式?生命週期函式就是元件某一時刻會自動執行的函式。initialzation 初始化 m...

React 生命週期函式

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

react生命週期函式

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