react之生命周期淵源

qingshanli1988 發布于2019-08-22 13:52 / 3457人閱讀

摘要：組件是否應當渲染新的或，返回表示跳過后續的生命周期方法，通常不需要使用以避免出現。組件銷毀生命周期函數的淵源自定義組件的生命周期主要通過三種狀態進行管理，它們負責通知組件當前所處的狀態，應該執行生命周期中的哪個步驟，是否可以更新。

生命周期有哪些以及用法 首次實例化

getDefaultProps
作用于組件類，只調用一次，返回對象用于設置默認的props，對于引用值，會在實例中共享

getInitialState
作用于組件的實例，在實例創建時調用一次，用于初始化每個實例的state，此時可以訪問this.props。

componentWillMount
在完成首次渲染之前調用，此時仍可以修改組件的state。

reader
必選的方法，創建虛擬DOM，該方法具有特殊的規則：
只能通過this.props和this.state訪問數據
可以返回null、false或任何React組件
只能出現一個頂級組件（不能返回數組）
不能改變組件的狀態

componentDidMount
真實的DOM被渲染出來后調用，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。
在服務端中，該方法不會被調用。

實例化之后完成的更新

getInitialState

componentWillMount

render

componentDidMount

組件已存在時的狀態改變

componentWillReciveProps
組件接收到新的props時調用，并將其作為參數nextProps使用，此時可以更改組件props及state。

shouldComponentUpdate
組件是否應當渲染新的props或state，返回false表示跳過后續的生命周期方法，通常不需要使用以避免出現bug。在出現應用的瓶頸時，可通過該方法進行適當的優化。
在首次渲染期間或者調用了forceUpdate方法后，該方法不會被調用

componentWillUpdate
接收到新的props或者state后，進行渲染之前調用，此時不允許更新props或state。

render

componentDidUpdate
完成渲染新的props或者state后調用，此時可以訪問到新的DOM元素。

組件銷毀

componentWillUnmount

生命周期函數的淵源

自定義組件（ReactCompositeComponent）的生命周期主要通過三種狀態進行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING，它們負責通知組件當前所處的狀態，應該執行生命周期中的哪個步驟，是否可以更新 state。三個狀態對應三種方法，分別為：mountComponent、updateComponent、unmountComponent，每個方法都提供了兩種處理方法

getDefaultProps

這個生命周期函數是在組件初始化構造函數中執行，所以只執行一次

// 構造函數
    var Constructor = function(props, context) {
      this.props = props;
      this.context = context;
      this.state = null;
      var initialState = this.getInitialState ? this.getInitialState() : null;
      this.state = initialState;
    };

狀態一：MountComponent

由于react構建的是虛擬DOM所以要準備開始渲染頁面之前拿到的虛擬的DOM，需要經過組裝之后然后給到瀏覽器，在這里會發生：首先會通過getInitialState拿到初始化的數據

  // 當前狀態為 MOUNTING
  this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING;

  // 當前元素對應的上下文
  this.context = this._processContext(this._currentElement._context);

  // 當前元素對應的 props
  this.props = this._processProps(this.props);

  // 獲取初始化 state
  this.state = this.getInitialState();

然后判斷如果有componentwillMount就會運行這里的js語法，在這里如果有state發生變化不會馬上出發render而是與initialState進行，組成新的state；這里渲染的時候是通過遞歸的方式進行渲染所以父組件的componentWillMount在子組件的componentWillMount之前執行，而子組件的componentDidMount在父組件的componentDidMount之前執行，這塊可能有點繞，直接上代碼

// render 遞歸渲染
  var markup = this._renderedComponent.mountComponent(
    rootID,
    transaction,
    mountDepth + 1
  );

這樣就把dom與state以及props數據拿到就可以完整的進行渲染

最后判斷是否有componentDidMount，如果有會執行這里的js

狀態二：receive Props

updateComponent 負責管理生命周期中的 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。

compnentWillReciveProps中setState在componentWillReceiveProps、shouldComponentUpdate 和 componentWillUpdate 中還是無法獲取到更新后的 this.state，即此時訪問的this.state 仍然是未更新的數據，只有在 render 和 componentDidUpdate 中才能獲取到更新后的this.state。

禁止在 shouldComponentUpdate 和 componentWillUpdate 中調用 setState，會造成循環調用，直至耗光瀏覽器內存后崩潰。(如果在 shouldComponentUpdate 或 componentWillUpdate 中調用 setState，此時的狀態已經從 RECEIVING_PROPS -> NULL，則 performUpdateIfNecessary 就會調用 updateComponent 進行組件更新，但 updateComponent 又會調用 shouldComponentUpdate 和 componentWillUpdate，因此造成循環調用，使得瀏覽器內存占滿后崩潰。)

狀態三：unMountComponent

在 componentWillUnmount 中調用 setState，是不會觸發 reRender。

云服務器 GPU云服務器生命周期軟件生命周期生命周期理論頁面生命周期

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

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

React入門0x018: 高階函數組件(HOC)

摘要：總結其實，這個和的思想有很大的淵源，不推薦繼承，而是推薦組合，而就是其中的典范。比如我們寫了兩個個高階組件，一個是，一個是，組件就可以隨意的在和之間隨意切換，而不需要改動組件原有代碼。 0x000 概述高階函數組件...還是一個函數，和函數組件不同的是他返回了一個完整的組件...他返回了一個class！！！ 0x001 直接上栗子照常，先寫個App組件，外部傳入一個theme ...

QLQ 2019-08-23 13:52 評論0 收藏0
細說 Django—web 前后端分離

摘要：理解這個統一標準的不符規范的資源沒有統一實踐一個例子圖書管理系統技術棧前端后端要點驗證前端路由統一的請求響應攔截處理權限控制表級對象級如下圖最后，是否要做前后端分離的開發模式，取決于實際情況的多方位考量，適合的才是更好的。所謂的前后端分離淵源前端發展史特點前端：負責 View 和 Controller 層后端：只負責 Model 層，業務處理/數據等優缺點優點：解...

adam1q84 2019-07-30 16:18 評論0 收藏0
PHP多進程初探 --- 再次談daemon進程

摘要：因為子進程一定不會是組長進程，所以子進程可以調用。主進程退出子進程繼續執行啦啦啦，啦啦啦，啦啦啦，已經變成啦，開心一般服務器軟件都有寫配置項，比如以模式運行還是以模式運行。 [原文地址：https://blog.ti-node.com/blog...] 其實前面是談過一次daemon進程的，但是并涉及過多原理，但是并不影響使用。今天打算說說關于daemon進程更多的二三事，本質上說，如...

fox_soyoung 2019-07-01 10:36 評論0 收藏0
當初要是看了這篇，React高階組件早會了

摘要：也就是說，如果能處理名為的這個高階組件返回的組件則完全無視這個。先展示我是一個組件，我設置了兩秒，之后展示倒計時完成概況：什么是高階組件？高階部件是一種用于復用組件邏輯的高級技術，它并不是 React API的一部分，而是從React 演化而來的一種模式。具體地說，高階組件就是一個接收一個組件并返回另外一個新組件的函數！這是官方文檔說的，我沒有截全，因為后面的解釋會造成誤解...

Yi_Zhi_Yu 2019-08-23 12:19 評論0 收藏0
React系列---React（三）組件的生命周期

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

geekzhou 2019-08-20 17:33 評論0 收藏0