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

原文首發在我的個人部落格：歡迎點此訪問我的個人部落格

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)

此時元件還未渲染完成，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 nextprops,nextstate component...

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...