React 組件的生命週期

標籤：

一段探索React自建內部構造的旅程

在先前的文章裡我們涵蓋了React基本原理和如何構建更加複雜的互動組件（基礎教程qkxue.net）。此篇文章我們將會繼續探索React組件的特性，特別是生命週期。

稍微思考一下React組件所做的事，首先想到的是一點是：React描述了如何去渲染（DOM）。我們已經知道React使用render()方法來達到這個目的。然而僅有render()方法可能不一定都能滿足我們的需求。如果在組件rendered之前或之後我們需要做些額外的事情該怎麼做呢？我們需要做些什麼以避免重複渲染(re-render)呢？

看起來我們需要對組件（運行）的各個階段進行控制，組件運行所有涉及的各個階段叫做組件的生命週期，並且每一個React組件都會經曆這些階段（騰雲科技ty300.com）。React提供了一些方法並在組件處於相應的階段時通知我們。這些方法叫做React組件的生命週期方法且會根據特定並可預測的順序被調用。

基本上所有的React組件的生命週期方法都可以被分割成四個階段：初始化、掛載階段（mounting）、更新階段、卸載階段（unmounting）。讓我們來近距離分別研究下各個階段。

初始化階段

初始化階段就是我們分別通過getDefaultProps()和getInitialState()方法定義this.props預設值和this.state初始值的階段。

getDefaultProps()方法被調用一次並緩衝起來——在多個類執行個體之間共用。在組件的任何執行個體被建立之前，我們（的代碼邏輯）不能依賴這裡的this.props。這個方法返回一個對象並且屬性如果沒有通過父組件傳入的話相應的屬性會掛載到this.props對象上。

getInitialState()方法也只會被調用一次，（調用時機）剛好是mounting階段開始之前。傳回值將會被當成this.state的初始值，且必須是一個對象。

現在我們來證明上面的猜想，實現一個顯示的值可以被增加和減少的組件，基本上就是一個擁有“+”和“-”按鈕的計數器。

React 組件的生命週期