掛載階段的組件生命周期
我們將reactjs組件渲染并構造DOM元素然后塞入頁面的過程稱為組件的掛載, 我們知道在reactjs內部對于每個組件都有一個初始化組件---->掛載到界面的過程,所以一個組件的調用可以像這樣理接
constructor()
render()
//構造DOM節(jié)點并插入頁面
但是為了更好的掌控組件的掛載择吊,reactjs又新增了兩個方法
constructor()
componentWillMount()
render()
//構造DOM節(jié)點并插入頁面
componentDidMount()
componentWillMount()這個方法實在組件掛載之前調用蛔趴,而componentDidMount是在組件掛在完成之后調用媳友。
當然組價既然可以掛載腌逢,那就可以刪除芒划,而方法componentUnMount就是在組件刪除之前調用的
constructor()
componentWillMount()
render()
//構造DOM節(jié)點并插入頁面
componentDidMount()
componentUnMount()
那么這些生命周期函數都有什么用呢
- constructor,這個函數可以用于對一些變量的初始化穿剖,及一些方法的綁定
- componentWillMount,這個函數用于頁面渲染之前蚤蔓,因此我們可以在其中進行一些諸如ajax請求的發(fā)送,定時器的開啟等操作
- componentdDidMount糊余,因為這個函數執(zhí)行的時候組價已經掛載完畢秀又,因此可以再其中進行動畫操作等
- componentUnMount這個函數運行與組件被刪除時单寂,我們可以在其中進行一些數據的刪除,如定時器
更新階段的組件生命周期
- 我們知道的是在State發(fā)送改變的時候組件也會重新渲染吐辙,此時又會產生新的生命周期
shouldComponentUpdate(nextProps, nextState):你可以通過這個方法控制組件是否重新渲染宣决。如果返回 false 組件就不會重新渲染。這個生命周期在 React.js 性能優(yōu)化上非常有用昏苏。
componentWillReceiveProps(nextProps):組件從父組件接收到新的 props 之前調用尊沸。
componentWillUpdate():組件開始重新渲染之前調用。
componentDidUpdate():組件重新渲染并且把更改變更到真實的 DOM 以后調用贤惯。
- 需要注意的是這些函數在第一次渲染時不會調用
- 還需注意的是不要在componentWillUpdate里面改變state,否則會陷入死循環(huán)
- 至于具體使用環(huán)境請在實際開發(fā)中探索