React元件的生命週期

react的生命週期包括以下三部分：

依次呼叫函式為：

1.1 constructor

constructor為es6中每個類的建構函式（並非每個元件都需要定義自己的建構函式，如無狀態的react元件）。

一般情況下建構函式的目的：①為了初始化state內容（元件生命週期中的任何函式都可能訪問state）；②繫結成員函式的this環境。如：

this.onclickfunc = this.onclickfunc.bind(this);

1.2 getinitialstate 和 getdefaultprops（不推薦再使用）

getinitialstate函式的返回值會用來初始化元件的this.state, 但是這個方法只有用react.createclass方法建立的元件類才會發生作用。

getdefaultprops函式的返回值可以作為props的初始值，但同樣的這個方法只有用react.createclass方法建立的元件類才會發生作用。

因此以上這兩個方法在es6的方法定義的react元件中根本不會用到。

1.3 render

react元件中最重要的函式。    

render函式並不做實際的渲染動作，它只返回乙個jsx（學習什麼是jsx）描述的結構，最終由react來操作渲染過程。

（特別的，若元件在某些情況下選擇沒有東西可渲染，那就讓render函式返回乙個null或者false。）

render函式應該是乙個純函式

，完全根據this.state和this.props來決定返回的結果，而且不要產生任何***。

在render函式中呼叫this.setstate毫無疑問是錯誤的。

*什麼是純函式（pure function）

：輸入輸出全是顯式的，也就是函式與外界交換資料只有乙個唯一渠道——引數和返

回值；函式從函式外部接收的所有輸入資訊都通過引數傳遞到該函式內部；函式輸出到函式外部的所有資訊都通過返回值

傳遞到該函式外部。

1.4 componentwillmount 和 componentdidmount

在裝載過程中，componentwillmount會在呼叫render函式之前被呼叫，componentdidmount會在render函式之

後被呼叫。也就是如圖所示：

componentwillmount

render

compomemtdidmount

render函式被呼叫完之後，componentdidmount函式並不是會被立刻呼叫。

更新過程會依次呼叫下面的函式：

只涉及乙個函式：componentwillunmount

React元件生命週期

元件的所有狀態結合起來就成了元件的生命週期。即 初始化階段 執行中階段 銷毀階段。不同生命週期內可以自定義的函式 初始化階段 getdefaultprops 獲取預設屬性，只呼叫一次，是在createclass之後呼叫的。例項之間共享引用 getinitialstate 初始化每個例項的特有初始化狀...

React元件生命週期

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

React 元件生命週期

在本章節中我們將討論 react 元件的生命週期。元件的生命週期可分成三個狀態 生命週期的方法有 這些方法的詳細說明，可以參考官方文件。以下例項在 hello 元件載入以後，通過 componentdidmount 方法設定乙個定時器，每隔100毫秒重新設定元件的透明度，並重新渲染 varhello...