react 生命週期函式介紹

2022-06-11 08:33:30 字數 1095 閱讀 1043

執行:元件載入錢最先呼叫一次,僅呼叫一次。

作用:定義狀態機變數。

注意:第乙個語句必須為super(), 否則會報錯:'this' is not allowed before super()

constructor(props)   

}

執行:元件初始渲染(render()被呼叫前)前呼叫,僅呼叫一次。

作用:如果這個函式呼叫的setstate改變了元件的某些狀態,react會等待setstate完成後再渲染元件。

注意:子元件也有componentwillmount函式,在父元件的該函式呼叫後再呼叫。

執行:componentwillmount呼叫之後, componentdidmount呼叫之前。

作用:渲染掛載元件。

觸發:1、初始化載入頁面,2、狀態機改變setstate,3、接收新的props(父元件更新)

注意:元件必要函式,不能在函式內使用setstate改變狀態機。

作用:渲染掛載元件,可以使用refs(react支援的乙個特殊屬性,可以將它加在render函式返回的元件元素上,起乙個標記作用,方便定位。)

注意:子元件也有該函式,在父元件呼叫前呼叫;如果該函式內有setstate改變狀態機,將會重新渲染元件,如果需要在頁面初始化之後才改變狀態機的,可以將網路請求放在該函式內。

作用:渲染掛載元件,可以使用refs(react支援的乙個特殊屬性,可以將它加在render函式返回的元件元素上,起乙個標記作用,方便定位。)

注意:react初次渲染時不會被呼叫。

作用:如果有些變化不需要執行渲染元件,可在該函式內阻止。

注意:不能在該函式內使用setstate來改變狀態機,如需要,請在componentwillreciveprops中改變。

作用:使用該方法可以在元件更新之後操作dom元素。

作用:在該方法中執行必要的清理,比如無效的定時器後者在componentdidmount中建立的dom元素。

注意

當乙個頁面中存在父子元件的時候,要特別注意componentdidmount的使用,因為子元件的componentdidmount會比父元件先呼叫,從而會引起父子元件傳參錯誤。

react 生命週期函式介紹

執行 元件載入錢最先呼叫一次,僅呼叫一次。作用 定義狀態機變數。注意 第乙個語句必須為super 否則會報錯 this is not allowed before super constructor props 執行 元件初始渲染 render 被呼叫前 前呼叫,僅呼叫一次。作用 如果這個函式呼叫的...

react生命週期函式介紹

初始化階段 constructor初始化狀態 componentwillmount 元件即將被裝載 渲染到頁面上 render 元件在這裡生成虛擬的dom節點 componentdidmount 元件真正在被裝載之後 二 執行中狀態 componentwillreceiveprops 元件將要接收到...

React生命週期函式

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