react的生命週期

元件的生命週期可分成三個狀態：

生命週期的方法有：

3. react新增的生命週期(個人補充)

例項：

以下例項在 hello 元件載入以後，通過 componentdidmount 方法設定乙個定時器，每隔100毫秒重新設定元件的透明度，並重新渲染：

class hello extends react.component;
}componentdidmount()
this
.setstate()
},100);
}render()}>hello 
) }
}reactdom.render(
, );

以下例項初始化state，setnewnumber用於更新state。所有生命週期在content元件中。

class button extends react.component
this.setnewnumber=this.setnewnumber.bind(this
); }
setnewnumber())
}render()>增加
this.state.data}/>
) }
}class content extends react.component
componentdidmount()
componentwillreceiveprops(newprops)
shouldcomponentupdate(newprops, newstate)
componentwillupdate(nextprops, nextstate) 
componentdidupdate(prevprops, prevstate) 
componentwillunmount() 
render() 
}reactdom.render(
, );

個人理解：

react的生命週期從廣義上分為三個階段：掛載、渲染、解除安裝

因此可以把react的生命週期分為兩類：掛載解除安裝過程和更新過程。

react的生命週期圖:

constructor()中完成了react資料的初始化，它接受兩個引數：props和context，當想在函式內部使用這兩個引數時，需使用super()傳入這兩個引數。

注意：只要使用了constructor()就必須寫super(),否則會導致this指向錯誤。

componentwillmount()一般用的比較少，它更多的是在服務端渲染時使用。它代表的過程是元件已經經歷了constructor()初始化資料後，但是還未渲染dom時。

元件第一次渲染完成，此時dom節點已經生成，可以在這裡呼叫ajax請求，返回資料setstate後元件會重新渲染

在此處完成元件的解除安裝和資料的銷毀。

clear你在組建中所有的settimeout,setinterval

移除所有組建中的監聽 removeeventlistener

有時候我們會碰到這個warning:

can only update a mounted or mounting component. this usually      means you called setstate() on an unmounted component. this is a   no-op. please check the code for the undefined component.

原因：因為你在元件中的ajax請求返回setstate,而你元件銷毀的時候，請求還未完成，因此會報warning

解決方法：

componentdidmount() )})}
componentwillunmount()

componentwillreceiveprops (nextprops) ，() =>)
}

shouldcomponentupdate返回true以後，元件進入重新渲染的流程，進入componentwillupdate,這裡同樣可以拿到nextprops和nextstate。

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

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

代替componentwillreceiveprops()。

老版本中的componentwillreceiveprops()方法判斷前後兩個 props 是否相同，如果不同再將新的 props 更新到相應的 state 上去。這樣做一來會破壞 state 資料的單一資料來源，導致元件狀態變得不可**，另一方面也會增加元件的重繪次數。

舉個例子:

//
before
componentwillreceiveprops(nextprops) );
} if(nextprops.islogin) }//
after
static getderivedstatefromprops(nextprops, prevstate) ;
} return
null;}
componentdidupdate(prevprops, prevstate) 
}

這兩者最大的不同就是:

在 componentwillreceiveprops 中，我們一般會做以下兩件事，一是根據 props 來更新 state，二是觸發一些**，如動畫或頁面跳轉等。

代替componentwillupdate。

常見的 componentwillupdate 的用例是在元件更新前，讀取當前某個 dom 元素的狀態，並在 componentdidupdate 中進行相應的處理。

這兩者的區別在於：

。

react的生命週期

React 生命週期生命週期方法

react 生命週期

react生命週期

react的生命週期

React 生命週期 生命週期方法

react 生命週期

react生命週期

相關推薦

React 生命週期生命週期方法