簡單談談我理解的React元件生命週期

2021-08-15 09:19:18 字數 2808 閱讀 9698

constructor( props, context){}componentwillmount (){}componentdidmount (){}componentwillreceiveprops( nextprops ){}shouldcomponentupdate( nextprops, nextstate){}componentwillupdate (nextprops,nextstate){}render()componentdidupdate(prevprops,prevstate){}componentwillunmount (){}1. constructor( props, context){}

constructor可接收兩個引數,獲取到父元件傳下來的的props,context

只要元件存在constructor,就必要要寫super,否則this指向會錯誤

constructor(props,context)
2.componentwillmount (){}元件將要掛載

此時元件還未渲染完成,dom還未渲染

3.componentdidmount (){}

元件渲染完成,此時dom節點已經生成,可以在這裡呼叫ajax請求

4.componentwillreceiveprops (nextprops){}

在接受父元件改變後的props需要重新渲染元件時需要用到這個函式

5.shouldcomponentupdate(nextprops,nextstate){}

setstate以後,state發生變化,元件會進入重新渲染的流程,return false可以阻止元件的更新

6.componentwillupdate (nextprops,nextstate){}

當元件進入重新渲染的流程才會進入componentwillupdate函式

7.render函式

render是乙個react元件所必不可少的核心函式,render函式會插入jsx生成的dom結構,react會生成乙份虛擬dom樹,在每一次元件更新時,在此react會通過其diff演算法比較更新前後的新舊dom樹,比較以後,找到最小的有差異的dom節點,並重新渲染

用法:

render () 

元件更新完畢後,react只會在第一次初始化成功會進入componentdidmount,之後每次重新渲染後都會進入這個生命週期,這裡可以拿到prevprops和prevstate,即更新前的props和state。

9.componentwillunmount ()

用處:1.clear你在組建中所有的settimeout,setinterval

2.移除所有組建中的監聽 removeeventlistener

父元件**:

import react, from "react"

import childcomponent from './component/childcomponent'

//引入子元件

constructor(props,context)

componentwillmount ()

componentdidmount ()

componentwillreceiveprops (nextprops)

shouldcomponentupdate (nextprops,nextstate)

componentwillupdate (nextprops,nextstate)

componentdidupdate (prevprops,prevstate)

render()

componentwillunmount ()

}

子元件**:

import react, from "react"

class childcomponent extends component

componentwillmount ()

componentdidmount ()

componentwillreceiveprops (nextprops)

shouldcomponentupdate (nextprops,nextstate)

componentwillupdate (nextprops,nextstate)

componentdidupdate (prevprops,prevstate)

render()

componentwillunmount ()

}export default childcomponent

瀏覽器中的執行結果如下圖:

所以在react的元件掛載及render過程中,最底層的子元件是最先完成掛載及更新的。

constructor()建構函式、componentwillmount執行順序:

頂層父元件–子元件–子元件–…–底層子元件

render、componentdidmount順序:

底層子元件–子元件–子元件–…–頂層父元件

簡單談談我理解的React元件生命週期

原文首發在我的個人部落格 歡迎點此訪問我的個人部落格 constructor props,context componentwillmount componentdidmount componentwillreceiveprops nextprops shouldcomponentupdate ne...

react 受控元件簡單理解

text value onchange 2.每當表單的值發生變化時,呼叫onchange事件處理器 3.事件處理器通過合成事件物件e拿到改變後的狀態,並更新應用的state.4.setstate觸發檢視的重新渲染,完成表單元件值得更新 使用defaultvalue和defaultchecked來表示...

react簡單元件

如下 constructor props this.state 獲取原先的陣列 可以直接寫this.state.todos 效果一樣 todos.unshift todo 新增陣列 this.setstate 更新陣列值 render class add extends react.componen...