工作中要對乙個**做再次更新, 可能是渲染後更新或者部分元件渲染之後, 對頁面效果做處理
之前對react的理解, 僅僅停留在render渲染.
這次好好理解了下react的生命週期
1 react元件有三種狀態 mounted(已插入真實的dom) updating(正在被渲染) 和 unmounted已移除真實dom
2 每個狀態有兩種處理方法 will(進入狀態之前呼叫) 和 did(進入狀態之後呼叫)
3 三種狀態總共有5種處理方法, componentwillmount(插入真實dom之前呼叫) componentdidmount(插入真實dom之後呼叫) componentwillupdate(被渲染之前呼叫) componentdidupdate(渲染之後呼叫) 和 componentwillunmount(移除之前呼叫)
4 當然還有元件初始方法: getdefaultprops(獲取預設屬性) 和 getinitialstate(獲取初始狀態),
5 還有兩種特殊方法: componentwillreceiveprops(object nextprops)(已載入的元件收到新的引數時呼叫) 和 shouldcomponentupdate(object nextprops, object nextstate)(判斷元件是否需要重新渲染時呼叫)
生命週期
1 當乙個元件被呼叫的時候, 會先呼叫改組件的初始方法getdefaultprops和getinitialstate,
2 然後執行componentwillmount(即將渲染)
3 進行渲染到dom上, 渲染完成之後觸發componentdidmount(渲染完成)方法
當props發生變化的時候
1.1 先觸發componentwillreceiveprops,
1.2 然後利用shouldcomponentupdate判斷是否需要重新渲染
1.3 如果不需要渲染,走2->3 ; 如果不需要渲染,狀態不變,不執行其他操作
當state發生變化的時候
2.1 直接利用shouldcomponentupdate判斷是否需要重新渲染
2.2 如果不需要渲染,走2->3 ; 如果不需要渲染,狀態不變,不執行其他操作
當元件被移除unmount的時候
3.1 直接執行componentwillunmount(移除前執行)
3.2 元件從dom樹移除
//getdefaultprops,元件屬性的預設值,只會被呼叫一次,返回的物件, 可以設定預設的props值
var hello = react.createclass(;
//也可以在呼叫元件的時候,設定props
var data = ;
//getinitialstate,呼叫有且只有一次,初始化元件的state,這個方法裡可以方法元件的props
//每個元件都有自己的getinitialstate,區別是statue只存在於元件內部,props可以在所有例項中呼叫
//getinitialstate和getdefaultprops是有區別
//getdefaultprops對元件類只呼叫一次,後續該元件類的應該不會再呼叫
//getdefaultprops每個元件例項都會呼叫,且只呼叫一次
//修改元件的state,使用this.setstate設定
var hello = react.createclass(;
getinitialstate: function() ;
//正常的生命週期, 即元件首次例項化
//1:getdefaultprops 2:getinitialstate 3:componentwillmount 4:render 5:componentdidmount
//componentwillmount在首次渲染之前呼叫,是render之前最後一次修改state的機會
//componentdidmount如果元件在服務端被例項化,不會呼叫, 反之在客戶端是可以的
//componentdidmount被呼叫時,已經渲染出真實的的dom,可以在該方法中通過this.getdomnode()訪問真實的dom,
//推薦使用react.finddomnode()
//state修改
//1:shouldcomponentupdate 2:componentwillupdate 3:render 4:componentdidupdate
//render
//會建立乙個虛擬dom, 用來表示元件的輸出,render是唯一乙個必須的方法,
//render中,只能通過this.props和this.state獲取資料,不能進行修改
//render中,只能返回null,false或者任何react元件
//render中,只能有乙個頂級元件,不能返回一組元件
//render中,不能改變元件的狀態
//render中,不能修改dom輸出
//render方法返回的結果並不是真正的dom元素，而是乙個虛擬的表現，類似於乙個dom tree的結構的物件。react之所以效率高，就是這個原因。
//由於元件不是真實的dom,只是存在於記憶體中的一種資料結構,叫做虛擬dom,virtual dom,只有當插入文件後才會變成真實的dom
//有時需要從元件獲取真實dom節點,需要用到ref屬性
var work = react.createclass({
render: function(){
this.getdomnode();//由於render時,元件還未渲染出真實的dom,這裡會報錯
return
componentdidmount: function(){
var test = this.refs.test.finddomnode();
//這裡是有效的,可以訪問到test節點
//注意 this.refs.[refname]獲取的是真實dom, 必須等到dom插入文件之後,才能使用
//元件渲染之後,通過一些事件,導致元件狀態改變,
//1:componentwillreceiveprops 2:shouldcomponentupdate 3:componentwillupdate
//4:render 5:componentdidupdate
//如果通過父元件更改元件的props,componentwillreceiveprops就會被呼叫,可以在這個方法裡面修改state,以便觸發render來重新渲染
//如果確定元件的props和state的改變,不需要重新渲染,可以讓shouldcomponentupdate方法return false,來阻止元件再次渲染,
//後面的render,componentwillupdate和componentdidupdate不會執行
//shouldcomponentupdate 預設返回true
//componentwillupdate和componentwillmount類似,在元件的props和state改變即將重新渲染之前執行
//componentwillupdate裡面不要更新state和props
//componentdidupdate和componentdidmount類似,在元件的props和state改變且渲染完成後執行
//移除元件
//直接執行componentwillunmout,
//移除之後再次呼叫元件時, 1:getinitialstate 2:componentwillmount 3:render 4:componentdidmount
感謝：
React 列表渲染
第一種 將列表內容拼裝成陣列放置到模板中。第二種 將資料拼裝成陣列的jsx物件。import react from react import reactdom from react dom let arr 小明 小黑 小白 let arrhtml 小明,小黑,小白 class welcome ext...
React渲染過程
1.babel會將jsx轉換為react.createlement表示式 2.react.createelement render 在render函式呼叫時，生成乙個element 虛擬節點 3.眾多element組成虛擬dom 4.reactdomcomponent將眾多element轉化為真實節...
React元素渲染
元素渲染 元素是構成react應用的最小單位。元素用來描述你在螢幕上看到的內容 const element 與瀏覽器的dom元素不同，react當中的元素事實上是普通的物件，reactdom可以確保瀏覽器的資料內容與react元素保持一致。頁面中新增乙個id root 的div 在此div中的所有內...