2、React組件的生命周期

Jensen 發布于2019-08-22 15:02 / 539人閱讀

摘要：組件生命周期嚴格定義了組件的生命周期，生命周期可能會經歷如下三個過程裝載過程也就是把組件第一次在樹上渲染的過程更新過程當組件被從新渲染的過程卸載過程組件從樹中刪除的過程。三種不同的過程，庫會調用組件的一些成員函數，即生命周期函數。

3. 組件生命周期

React嚴格定義了組件的生命周期，生命周期可能會經歷如下三個過程：

裝載過程（Mount）：也就是把組件第一次在DOM樹上渲染的過程；

更新過程（Updata）：當組件被從新渲染的過程；

卸載過程（Unmount）：組件從DOM樹中刪除的過程。

三種不同的過程，React庫會調用組件的一些成員函數，即生命周期函數。

3.1、裝載過程

當組件第一次被渲染時，依次調用的函數：

static propTypes(createClass創建的話：propTypes)

static defaultProps（createClass創建的話：getDefaultProps(){}）

constructor(初始化state；createClass創建的話：getInitalState)

componentWillMount

render

componentDidMount

constructor

ES6中每個類的構造函數，要創建一個組件類的實例，便會調用對應的構造函數
注意：

并不是每個組件都需要定義自己的構造函數，無狀態的React組件往往就不需要定義構造
函數；

一個React組件需要構造函數目的：

初始化state，因為組件的生命周期中任何函數都可能要訪問state，那么整個周期中第一個被調用的構造函數便是初始化state最理想的地方；

綁定成員函數的this環境：

? - 因為在ES6語法下，類的每個成員函數在執行時的this并不是和類實例自動綁定的；
? - 而在構造函數中this就是當前組件實例，所以，為了方便將來調用，往往在構造函數中將這個實例的特定函數綁定this為當前類實例：

   ...
   constructor(props){
      super(props);
      
      this.onClickFunc = this.onClickFunc.bind(this);
   }

getInitialState和getDefaultProps
? 1. getInitialState函數的返回值用來初始化組件的this.state;
? 2. getInitialState只出現在裝載過程，也就是說一個組件的整個生命周期過程中，這個函數只被調用一次；
? 3. getDefaultProps函數的返回值可以作為props的初始值；
? 4. 兩個函數都只有在使用React.createClass方法創建組件類時才會用到：

 const Sample = React.createClass({
   getInitialState: function() {
? ? ? ?return {foo: "返回值將作為this.state的初始值"};
   },
   getDefaultProps: function() {
? ? ? ?return {sampleProp: "作為props的初始值"}
   }
 })

?5. React.createClass創建方法已經逐漸被Facebook官方廢棄
? 6. 使用ES6時,在構造函數中通過this.state賦值完成狀態初始化；通過給類屬性（注意是類屬性，而不是類的實例對象的屬性）defaultProps賦值指定的props初始值：

class Sample extends React.Component{
  constructor (props){
    super(props);
? ? ? ?this.state = {foo: "初始值"}
  }
}
? ?Sample.defaultProps = {
  sampleProps: 0
}

render

render函數是React組件中最重要的函數，一個React組件可以忽略其他所有函數都不實現，但一定要實現render函數，因為所有React組件的父類React.Component類對除了render之外的生命周期函數都有默認實現。

通常一個組件要發揮作用，總是要渲染一些東西，render函數并不做實際的渲染動作，它只是返回一個JSX描述結構，最終由React來操作渲染過程；

當某個特殊的組件作用不是渲染界面，或者沒有東西可畫時，可讓render函數返回null或者false，即告訴React此組件不渲染任何DOM元素；

注意：render函數應該是一個純函數，完全根據this.state和this.props來決定返回的結果，而且不要產生任何副作用，不要在render函數中調用this.setState去改變狀態，因為一個純函數不應該引起狀態的改變。

componentWillMount和componentDidMount

在裝載過程中，componentWillMount會在render函數之前調用，此時還沒有任何東西渲染出來，即使調用this.setState修改狀態也不會發生重新繪制；

componentDidMount在render函數之后調用，但render調用之后并不會立即調用，而是在render函數返回的東西已經引發了渲染，組件已經被‘裝載’到了DOM樹上后，componentDidMount才被調用，此時已繪制出真實的DOM樹；

注意：

render函數本身并不往DOM樹上渲染或者裝載內容，它只是返回一個表示JSX表示的對象（及組件實例），然后由React庫根據返回的對象決定如何渲染；

而React庫肯定是要把所有組件返回的結果綜合起來，才能知道如何產生對應的DOM修改；

所以只有React庫調用所有組件的render函數之后，才有可能完成DOM裝載，這時候才會依調用componentDidMount函數作為裝載的收尾。

componentWillMount可以在服務器和瀏覽器端被調用，而componentDidMount只能在瀏覽器端被調用（因為componentDidMount是在‘裝載’完成之后被調用，且‘裝載’是一個創建組件并放到DOM樹上的過程，而服務器端渲染通過React組件產生的只是一個純粹的字符串，并不會產生DOM樹，即在服務器端不可能完成‘裝載過程’所以無法調用componentDidMount）

3.2、更新過程

隨著用戶的操作改變展示的內容，當props或者state被修改時，就會引發組件的更新過程；

更新過程會依次調用以下生命周期函數，其中render函數和“裝載”過程一樣：
?- componentWillReceiveProps
?- shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

并不是所有的更新過程都會執行全部函數。

componentWillReceiveProps（nextProps）

并不是只有在組件的props發生改變的時候才會調用此函數；

在更新過程，只要是父組件的render函數被調用，在render函數里被渲染的子組件就會經歷更新過程，不管父組件傳給子組件的props有沒有改變，都會觸發子組件的componentWillReceiveProps函數；

注意：通過this.setState方法觸發的更新過程不會調用這個函數；

因為，這個函數適合根據新的props值（也就是參數nextProps）來計算是不是要更新內部狀態state；而更新內部狀態的方法是this.setState,如果this.setState的調用導致componentWillReceiveProps再調用，那將是一個死循環。

shouldComponentUpdate(nextProps,nextState)

除了render函數，shouleComponentUpdate可能是生命周期函數中最重要的一個函數；

因為render函數決定了該渲染什么，shouldComponentUpdate決定了一個組件什么時候不需要渲染；

render和shouldComponentUpdate也是React生命周期函數中唯二兩個要求有返回結果的函數；

render函數的返回結果用于構建DOM對象，shouldComponentUpdate函數返回一個布爾值，告訴React庫這個組件這次更新過程是否繼續；

在更新過程中，React庫首先調用shouldComponentUpdate函數，如果這個函數返回true，那就繼續更新過程，接下來調用render，反之則終止此次更新過程；

shouldComponentUpdate的參數就是接下來的props和state值；我們可以根據這兩個參數，外加this.props和this.state來判斷返回true或false，從而避免不必要的更新。

componentWillUpdate和componentDidUpdate

如果組件的shouldComponentUpdate返回true，React接下來調用componentWillUpdate、render和componentDidUpdate；

和“裝載”過程不同，這對函數都可以在服務器和瀏覽器更新階段調用

不過，通常在使用React做服務端渲染時，基本不會經歷更新過程，因為服務器端只需要產出HTML字符串，而一個裝載過程就足夠產出HTML字符串了，所以正常情況下，服務器端不會調用componentDidUpdate函數，如果調用了，說明程序有錯，需要改進。

3.2、卸載過程

React組件的卸載過程只涉及一個函數componentWillUnmount,

當React組件要從DOM樹上刪除之前，對應的componentWillUnmount函數會被調用，所以這個函數適合做一些清理性的工作。

GPU云服務器云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93116.html

捋一捋React的生命周期

摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個鉤子函數這些方法會在組件初始化的時候被調用，只跟實例的創建有關。前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數混雜在一起，難免會讓許多新來者有很多困惑。所以這一篇我們來...

MobService 2019-08-23 15:20 評論0 收藏0
React系列---React（三）組件的生命周期

摘要：組件裝載過程裝載過程依次調用的生命周期函數中每個類的構造函數，創造一個組件實例，當然會調用對應的構造函數。組件需要構造函數，是為了以下目的初始化，因為生命周期中任何函數都有可能訪問，構造函數是初始化的理想場所綁定成員函數的環境。 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---之React（三）組件的生...

geekzhou 2019-08-20 17:33 評論0 收藏0
Hooks 與 React 生命周期的關系

摘要：更新階段卸載階段兄弟節點之間的通信主要是經過父組件和也是通過改變父組件傳遞下來的實現的，滿足的設計遵循單向數據流模型，因此任何兩個組件之間的通信，本質上都可以歸結為父子組件更新的情況。你真的了解 React 生命周期嗎？ React 生命周期很多人都了解，但通常我們所了解的都是單個組件的生命周期，但針對 Hooks 組件、多個關聯組件（父子組件和兄弟組件）的生命周期又是怎么樣的...

oliverhuang 2019-08-26 10:25 評論0 收藏0
不了解一下React16.3之后的新生命周期？

摘要：本文主要介紹之后的生命周期。該方法有兩個參數和返回值為對象不需要返回整體，把需要改變的返回即可。必須有一個返回值，返回的數據類型可以有。此生命周期主要用于優化性能。最后，說明一點這三個生命周期在未來版本中會被廢棄。 React16.3.0開始，生命周期進行了一些變化。本文主要介紹React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react組件的...

468122151 2019-08-23 15:41 評論0 收藏0
React.js 小書 Lesson20 - 更新階段的組件生命周期

摘要：所以對于組件更新階段的組件生命周期，我們簡單提及并且提供一些資料給大家。這里為了知識的完整，補充關于更新階段的組件生命周期你可以通過這個方法控制組件是否重新渲染。大家對這更新階段的生命周期比較感興趣的話可以查看官網文檔。 React.js 小書 Lesson20 - 更新階段的組件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 評論0 收藏0