Reactv16 8 6生命週期函式

react 主動呼叫的方法，也可重寫這些方法

生命週期圖譜

constructor(props)

如果不需要初始化 state 或不進行方法繫結，則不需要使用該方法

在元件掛載之前會先呼叫該方法，在實現建構函式時必須先呼叫super(props)方法，否則會出現bug

通常，建構函式僅用於兩種情況：1. 初始化state2. 為事件處理函式繫結例項

在該方法中不要使用setstate()方法,在其他方法中使用setstate()改變 state

為什麼 props 複製給 state 會產生 bug

constructor(props) ;
this.handleclick = this.handleclick.bind(this);
}

static getderivedstatefromprops() （此方法不常用）

此方法會在render方法之前呼叫，並且初始化和資料更新時都會呼叫，它返回乙個物件更新 state，如果返回null 則不更新任何內容。

此方法適用於 state 值在任何時候都取決於props 的情況。

render()

render 是 class 元件必須實現的方法

當該方法被呼叫時，它會監測 props 和 state 的變化，並且返回以下型別之一：

render方法最好為純函式，即在不修改元件state情況下，每次呼叫時都返回相同的結果，並且不會直接與瀏覽器互動

如果要和瀏覽器互動，可以在其他生命週期函式中執行，注意：shoouldcomponentupdate方法中返回false,將不會呼叫render方法

class example extemds react.component
render()
}

componentdidmount()

此方法會在元件掛載後（插入dom樹中）呼叫，初始化的資料的好地方

static getderivedstatefromprops() （此方法不常用）(已解釋)

shouldcomponentupdate(nextprops, nextstate) （此方法不常用）

當state 或 props 變化時該方法會在渲染執行前呼叫預設返回值為true,首次載入不會被呼叫

根據該方法的返回值判斷元件輸出是否受當前 state 或 props 更改的影響。預設為 state 每次更新重新渲染

此方法進僅做為效能優化的方式存在，不要企圖依靠此方法來「阻止」渲染，因為這可能會產生 bug。你應該考慮使用內建的 purecomponent 元件，而不是手動編寫 shouldcomponentupdate()。purecomponent 會對 props 和 state 進行淺層比較，並減少了跳過必要更新的可能性。

render()(已解釋)

getsnapshotbeforeupdate() （此方法不常用）

此方法在最近一次渲染輸出（提交到dom節點）之前呼叫。使元件能在傳送更改前從dom中捕獲一些資訊（如位置）。此生命週期的返回值將作為引數傳遞給componentdidupdate()

class scrollinglist extends react.component 
getsnapshotbeforeupdate(prevprops, prevstate) 
return null;
} componentdidupdate(prevprops, prevstate, snapshot) 
} render() 
);}}

上述示例中，重點是從 getsnapshotbeforeupdate 讀取 scrollheight 屬性，因為「render」階段生命週期（如 render）和「commit」階段生命週期（如 getsnapshotbeforeupdate 和 componentdidupdate）之間可能存在延遲。

componentdidupdate(prevprops, prevstate, snapshot)

此方法會在資料更新後立即呼叫，首次載入不會被呼叫,在此方法中使用setstate必須將它放到條件語句中，否則會導致死迴圈。還會導致額外的重新渲染，影響效能

componentdidupdate(prevprops) 
}

注意：如果 shouldcomponentupdate() 返回值為 false，則不會呼叫 componentdidupdate()。

componentwillunmount()

此方法會在元件解除安裝銷毀前呼叫，可以執行必要的清理操作，如定時器，取消網路請求，或清除componentdidmount() 中建立的訂閱等。

error boundaries：捕獲渲染期間及整個樹的函式傳送的錯誤，渲染降級 ui，但自身的錯誤無法捕獲 react 16中的錯誤處理

static getderivedstatefromerror(error) （此方法不常用）

次生命週期會在後代元件丟擲錯誤後呼叫，將錯誤作為引數，返回乙個值更新state，在渲染期間不允許出現***，建議使用 componentdidcatch()

componentdidcatch(error, info) （此方法不常用）

此方法在後代元件丟擲錯誤後被呼叫

如果發生錯誤，可以通過呼叫setstate使用componentdidcatch()渲染降級 ui，但在未來的版本中將不推薦這樣做。可以使用靜態getderivedstatefromerror()來處理降級渲染。

class errorboundary extends react.component ;
} static getderivedstatefromerror(error) ;
} componentdidcatch(error, info) 
render() 
return this.props.children;
}}

class square extends react.component ;
} static getderivedstatefromprops(props, state) 
componentdidmount() 
shouldcomponentupdate()
getsnapshotbeforeupdate()
componentdidupdate() 
static getderivedstatefromerror() 
componentdidcatch()
compoentwillunmount()
render() )}
}>
);}}

owen 的個人部落格

Reactv16 8 6生命週期函式

1 生命週期

17 生命週期Activity

Spring學習06生命週期

Reactv16 8 6生命週期函式

1 生命週期

17 生命週期Activity

Spring學習06生命週期

相關推薦