React 的生命週期

其實大部分團隊不見得會跟進公升到16版本，所以16前的生命週期還是很有必要掌握的，何況16也是基於之前的修改

生命週期可分為四個階段：

1. 元件初始化(initialization)階段：

- constructor 方法

元件一建立就會呼叫 es6 class類中的 constructor 方法（最先執行）

super(props)`用來呼叫類的構造方法( constructor() ), 也將父元件的props注入給子元件，子元件中props唯讀不可變，state可變

而constructor()用來做一些元件的初始化工作，如定義this.state的初始內容

class

todolist
extends
component
}}

- componentwillmount 方法

在元件掛載到dom前呼叫，且只會被呼叫一次，在這邊呼叫this.setstate不會引起元件重新渲染，也可以把寫在這邊的內容提前到constructor()中，所以專案中很少用

- render 方法

根據元件的props和state（兩者的重傳遞和重賦值，無論值是否有變化，都可以引起元件重新render） ，當父元件的 render 函式被執行時, 它的子元件的 render 函式也會被重新執行

return 乙個react元素（描述元件，即jsx模板），不負責元件實際渲染工作，之後由react自身根據此元素去渲染出頁面dom。render是純函式（pure function：函式的返回結果只依賴於它的引數；函式執行過程裡面沒有***），不能在裡面執行this.setstate，會有改變元件狀態的***。

- componentdidmount 方法

元件掛載到dom後呼叫，且只會被呼叫一次

3. 元件的更新(updating)階段

- componentwillreceiveprops 方法(nextprops)

(只跟父元件傳過來的 props 的變化有關，所以只有能接受 props 引數的子元件才有這個方法)

此方法只調用於props引起的元件更新過程中，引數nextprops是父元件傳給當前元件的新props

而且這個元件第一次存在于父元件的是時候不會被執行（就是第一次不會執行，以後如果 nextprops 引數有變化才會被執行

class

child
extends
component;}
componentwillreceiveprops
(nextprops));
}render()
<
/div>
}}

此方法通過比較nextprops，nextstate及當前元件的this.props，this.state，返回true時當前元件將繼續執行更新過程，返回false則當前元件更新停止，以此可用來減少元件的不必要渲染，優化元件效能。

shouldcomponentupdate

(nextstates)
}

此方法在呼叫render方法前執行，在這邊可執行一些元件更新發生前的工作，一般較少用

- render 方法

render方法在上文講過，這邊只是重新呼叫

- componentdidupdate(prevprops, prevstate)

此方法在元件更新後被呼叫，可以操作元件更新的dom，prevprops和prevstate這兩個引數指的是元件更新前的props和state

4. 解除安裝階段

- componentwillunmount 方法

此方法在元件被解除安裝前呼叫，可以在這裡執行一些清理工作，比如清楚元件中使用的定時器，清楚componentdidmount中手動建立的dom元素等，以避免引起記憶體洩漏。

完整的生命週期在 react 元件中的應用

class

todolist
extends
component
}// 元件載入前
componentwillmount()
// nextprops 引數變化後執行 第一次不執行
componentwillreceiveprops
(nextprops)
// shouldcomponentupdate 在元件更新前比較引數和資料，自己返回布林值，優化元件效能 
shouldcomponentupdate
(nextstates)
}// componentwillupdate 在 render 前執行
componentwillupdate()
// 生成描述檔案 和 渲染
render()
classname=
"logo"
/>
<
/div>
'target' value=
onchange=
/>
'red-btn' onclick=
>add<
/button>
<
/div>
<
/ul>
<
/div>
<
/fragment>);
}// 元件載入後
componentdidmount()
// componentdidupdate 在元件更新後被呼叫
componentdidupdate()
// componentwillunmount 在元件被解除安裝前呼叫
新引入了兩個新的生命週期函式
- getderivedstatefromprops 方法
在元件建立時和更新時的render方法之前呼叫，它應該返回乙個物件來更新狀態，或者返回null來不更新任何內容
- getsnapshotbeforeupdate 方法
在最近一次渲染輸出（提交到 dom 節點）之前呼叫。它使得元件能在發生更改之前從 dom 中捕獲一些資訊（例如，滾動位置）。此生命週期的任何返回值將作為引數傳遞給componentdidupdate()
。
class
scrollinglist
extends
react.component
getsnapshotbeforeupdate
(prevprops, prevstate)
return
null;}
componentdidupdate
(prevprops, prevstate, snapshot)
}render()
>
<
/div>);
}}

React 生命週期 生命週期方法

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

react 生命週期

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

react生命週期

盜圖一張 第一次進入頁面列印結果 1 parent constructor 2 parent conponentwillmount 3 parent render 4 initial render constructor 5 componentwillmount 6 render 7 compone...