ES6中的React生命週期詳解

太長時間沒寫react了，有點生。重新撿起來練練手。

import react, from 'react';
class demo extends component 
}componentwillmount () 
componentdidmount () 
componentwillreceiveprops (nextprops) 
shouldcomponentupdate (nextprops,nextstate) 
componentwillupdate (nextprops,nextstate) 
componentdidupdate (prevprops,prevstate) 
render () 
componentwillunmount () 
}export default demo;

react生命週期主要包括三個階段：初始化階段、執行中階段和銷毀階段，在react不同的生命週期裡，會依次觸發不同的鉤子函式

建構函式內部(注意是內部哦，在元件其他地方是可以直接接收的)使用props或context,則需要傳入，並傳入super物件。

constructor(props,context)

也可以單獨傳乙個，都不需要就不用傳。

關於es6的class constructor和super

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

constructor()

元件即將被渲染到頁面之前觸發，此時可以進行開啟定時器、向伺服器傳送請求等操作

但是這裡有乙個問題

ajax請求能寫在willmount裡嗎？

：答案是不推薦，別這麼寫

1.雖然有些情況下並不會出錯，但是如果ajax請求過來的資料是空，那麼會影響頁面的渲染，可能看到的就是空白。

2.不利於服務端渲染，在同構的情況下，生命週期會到componentwillmount，這樣使用ajax就會出錯

元件渲染

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

元件接收到屬性時觸發

在接受父元件改變後的props需要重新渲染元件時用到的比較多

當元件接收到新屬性，或者元件的狀態發生改變時觸發。元件首次渲染時並不會觸發

shouldcomponentupdate(newprops, newstate) //該鉤子函式可以接收到兩個引數，新的屬性和狀態，返回true/false來控制項是否需要更新。

一般我們通過該函式來優化效能：

乙個react專案需要更新乙個小組件時，很可能需要父元件更新自己的狀態。而乙個父元件的重新更新會造成它旗下所有的子元件重新執行render()方法，形成新的虛擬dom，再用diff演算法對新舊虛擬dom進行結構和屬性的比較，決定元件是否需要重新渲染

無疑這樣的操作會造成很多的效能浪費，所以我們開發者可以根據專案的業務邏輯，在shouldcomponentupdate()中加入條件判斷，從而優化效能

例如react中的就提供了乙個purecomponent的類，當我們的元件繼承於它時，元件更新時就會預設先比較新舊屬性和狀態，從而決定元件是否更新。值得注意的是，purecomponent進行的是淺比較，所以元件狀態或屬性改變時，都需要返回乙個新的物件或陣列

元件即將被更新時觸發

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

元件被更新完成後觸發。

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

元件被銷毀時觸發。這裡我們可以進行一些清理操作，例如清理定時器，取消redux的訂閱事件等等。

ES6中的React生命週期詳解

React中LifeCycle生命週期詳解

React中的生命週期

react的生命週期

ES6中的React生命週期詳解

React中LifeCycle生命週期詳解

React中的生命週期

react的生命週期

相關推薦