React從0到1 元件生命週期

2022-03-10 22:34:02 字數 1458 閱讀 4556

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發生變化的...