1、react 嚴格定義了元件的生命週期,生命週期可能會經歷如下三個過程
裝載過程( mount),也就是把元件第一次在 dom 樹中渲染的過程;
更新過程( update ),當元件被重新渲染的過程;
解除安裝過程( unmount),元件從 dom 中刪除的過程 。
2、裝載過程
我們先來看裝載過程,當元件第一次被渲染的時候,依次呼叫的函式是如下這些:
constructor
getlnitialstate
getdefaultprops
componentwillmount
render
componentdidmount
1. constructor
es6中建立乙個元件的例項,無狀態的react元件不需要例項
1、初始化state
this.state =2、繫結成員的this環境
this.onclickincbutton = this.onclickincbutton.bind(this);this.onclickdecbutton = this.onclickdecbutton.bind(this);
3、getlnitialstate 和 getdefaultprops
react.createclass 方法創造的元件類才會用到這兩種方法,分別用來初始化state和props
4、render
用於渲染dom的函式,非常重要
5、componentwillmount 和 componentdidmount
//元件裝載前
componentwillmount()//元件裝載後,dom已經存在,可以使用其他的庫,比如jq來執行其他操作
shouldcomponentupdate決定了乙個元件什麼時候不需要渲染,必須有返回值,true是渲染,false是不渲染
shouldcomponentupdate(nextprops, nextstate)7、componentwillunmount 用於解除安裝元件
react(四)元件的生命週期
元件的生命週期 當元件第一次渲染時,依次呼叫的過程 1 constructor 1 不是所有元件均會定義該函式 2 定義該函式的目的 this.state 例如,已有成員函式clickbtn,繫結this指向的方式可以是this.clickbtn this.clickbtn.bind this 2 ...
React(三) 元件的生命週期
react元件的生命週期分為三大部分 1 掛載 mount 我們把元件渲染,並且構造dom元素插入到頁面的過程稱為元件的掛載。元件掛載的過程 元件掛載先關函式,只在元件掛載的時候呼叫,在元件更新時不會執行 import react from react class test extends reac...
react 複習(2)元件的生命週期
當元件例項被建立並插入 dom 中時,其生命週期呼叫順序如下 constructor static getderivedstatefromprops static getderivedstatefromprops nextprops,prevstate nextprops 當傳入的type發生變化的...