React 生命週期的認識

認識到的react生命週期分為react16.0 之前的生命週期和react16.0之後的生命週期

static defaultprops =

;static proptypes =
;constructor
(props);}
componentwillmount()
render()
componentdidmount()
元件執行時

constructor

(props)
componentwillmount()
componentdidmount()
componentwillreceiveprops
(nextprops)
shouldcomponentupdate
(nextprops, nextstate)
componentwillupdate
(nextprops, nextstate)
componentdidupdate
(prevprops, prevstate)
componentwillunmount()
render()

當使用 es6 classes 構建 react 元件時，static defaultprops = {} 其實就是呼叫內部的 getdefaultprops方法，constructor 中的 this.state = {} 其實就是呼叫內部的 getinitialstate 方法

react v16.3 getderivedstatefromprops無論是mounting還是updating，也無論是因為什麼引起的updating，全部都會被呼叫

react v16.4 static getderivedstatefromprops(props, state)

在元件建立時和更新時的render方法之前呼叫，它應該返回 乙個物件來更新狀態，或者返回null來不更新任何內容。

getsnapshotbeforeupdate() 被調用於render之後，可以讀取但無法使用dom的時候。

它使您的元件可以在可能更改之前從dom捕獲一些資訊(例如滾動位置)。此生命週期返回的任何值都將作為引數傳遞給componentdidupdate()。

class

scrollinglist
extends
react.component
getsnapshotbeforeupdate
(prevprops, prevstate)
return
null;}
componentdidupdate
(prevprops, prevstate, snapshot)
}render()
>
<
/div>);
}}

constructor

(props)
console.
log(
'constructor')}
// 初始化/更新時呼叫
static
getderivedstatefromprops
(props, state)
// 初始化渲染時呼叫
componentdidmount()
// 元件更新時呼叫
shouldcomponentupdate
(nextprops, nextstate)
// 元件更新時呼叫
getsnapshotbeforeupdate
=(prevprops, prevstate)
=>
// 元件更新後呼叫
componentdidupdate
(prevprops, prevstate)
// 元件解除安裝時呼叫
componentwillunmount()
render()

1、from taobaofed 【i like his website】高效能 react 元件

2、什麼時候要在 react 元件中寫 shouldcomponentupdate

3、【喜歡這篇文章講解的生命週期】 react如何通過shouldcomponentupdate來減少重複渲染

簡單認識React的生命週期

一.react的生命週期 這裡render渲染函式會執行兩次，第一次是當元件初始化完成的時候，第二次是當元件完成從資料的修改的時候再執行一次 1.建立和初始化到的生命週期 1 getdefaultprops 15.6版本的 初始化props值 2 componentwillreceiveprops ...

React 生命週期 生命週期方法

生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...

react 生命週期

首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...