2. 程式人生 > >React原始碼解析（3）：元件的生命週期

React原始碼解析（3）：元件的生命週期

阿新 • • 發佈：2018-12-03

元件的生命週期分為二個部分

  1. 元件的掛載
  2. 元件的更新

元件的掛載

在上一章對於元件的掛載已經做了詳細的說明，但是涉及到元件生命週期部分被略過.接下來我將詳細的對其說明. 元件的掛載涉及到二個比較重要的生命週期方法componentWillMount和componentDidMount.

componentWillMount

對於componentWillMount這個函式玩過React的都知道他是元件render之前的觸發. 但是如果我再具體點呢. 是在例項之前？還是例項之後？還是構建成真實dom之前？還是構建成真實dom之前，渲染之前?估計很多人不知道吧.所以在面試的時候無論你對React

有多熟，還是儘量不要說"精通"二字.(大佬除外)

componentWillMount是元件更新之前觸發，所以直接從ReactCompositeComponent.mountComponent裡面找

// this.performInitialMount

if (inst.componentWillMount) {
    debugger
    if ("development" !== "production") {
        measureLifeCyclePerf(
            function() {
                return inst.componentWillMount();
            },
            debugID,
            "componentWillMount"
 

        );
    } else {
        inst.componentWillMount();
    }
    // When mounting, calls to `setState` by `componentWillMount` will set
    // `this._pendingStateQueue` without triggering a re-render.
    if (this._pendingStateQueue) {
        inst.state = this._processPendingState(
            inst.props,
            inst.context
        );
    }
}
複製程式碼

程式碼在performInitialMount函式裡面，所以在例項之後，虛擬dom構建真實dom之前觸發的

componentDidMount

直接看程式碼吧

var markup;
if (inst.unstable_handleError) {
    markup = this.performInitialMountWithErrorHandling(
        renderedElement,
        hostParent,
        hostContainerInfo,
        transaction,
        context
    );
} else {
    markup = this.performInitialMount(
        renderedElement,
        hostParent,
        hostContainerInfo,
        transaction,
        context
    );
}
if (inst.componentDidMount) {
        if ("development" !== "production") {
            transaction
                .getReactMountReady()
                .enqueue(function() {
                    measureLifeCyclePerf(
                        function() {
                            return inst.componentDidMount();
                        },
                        _this._debugID,
                        "componentDidMount"
                    );
                });
        } else {
            transaction
                .getReactMountReady()
                .enqueue(
                    inst.componentDidMount,
                    inst
                );
        }
    }
複製程式碼

它是出現在markup(真實dom)之後.但是肯定不會在這裡面執行，因為在markup還沒插入到container裡面呢。回顧一下上一章的內容MountComponentIntoNode方法mountComponent之後還有個setInnerHTML(container, markup)只有這個函式執行完之後componentDidMount才能執行.

注意performInitialMount方法 看看下面的程式碼

class A extends React.Component {
    render(){
        return <K />
    }
}
<App>
    <A />
</App>
複製程式碼

this.componentDidMount的執行順序是K-->A--->App. 因為APP執行到 this.performInitialMount就開始深度遍歷了.然後執行A，A又遍歷執行K. K執行完才向上執行. 瞭解了他們的執行順序我們看看

transaction
    .getReactMountReady()
    .enqueue(function() {
        measureLifeCyclePerf(
            function() {
                return inst.componentDidMount();
            },
            _this._debugID,
            "componentDidMount"
        );
    });
複製程式碼

再看看這個transaction是在哪裡生成的

var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
    /* useCreateElement */
    !shouldReuseMarkup &&
        ReactDOMFeatureFlags.useCreateElement
);
transaction.perform(
    mountComponentIntoNode,
    null,
    componentInstance,
    container,
    transaction,
    shouldReuseMarkup,
    context
);
複製程式碼

transaction是React裡面一個非常核心的功能. 出現在很多個地方，不搞清楚transtion原始碼是沒辦法讀下去的.

事務和佇列

看看官方給出的流程圖

 * <pre>
*                       wrappers (injected at creation time)
*                                      +        +
*                                      |        |
*                    +-----------------|--------|--------------+
*                    |                 v        |              |
*                    |      +---------------+   |              |
*                    |   +--|    wrapper1   |---|----+         |
*                    |   |  +---------------+   v    |         |
*                    |   |          +-------------+  |         |
*                    |   |     +----|   wrapper2  |--------+   |
*                    |   |     |    +-------------+  |     |   |
*                    |   |     |                     |     |   |
*                    |   v     v                     v     v   | wrapper
*                    | +---+ +---+   +---------+   +---+ +---+ | invariants
* perform(anyMethod) | |   | |   |   |         |   |   | |   | | maintained
* +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
*                    | |   | |   |   |         |   |   | |   | |
*                    | |   | |   |   |         |   |   | |   | |
*                    | |   | |   |   |         |   |   | |   | |
*                    | +---+ +---+   +---------+   +---+ +---+ |
*                    |  initialize                    close    |
*                    +-----------------------------------------+
 * </pre>
var TransactionImpl = {
  reinitializeTransaction: function () {
    this.transactionWrappers = this.getTransactionWrappers();
    if (this.wrapperInitData) {
      this.wrapperInitData.length = 0;
    } else {
      this.wrapperInitData = [];
    }
    this._isInTransaction = false;
  },

  _isInTransaction: false,

  getTransactionWrappers: null,

  isInTransaction: function () {
    return !!this._isInTransaction;
  },

  perform: function (method, scope, a, b, c, d, e, f) {
    !!this.isInTransaction() ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Transaction.perform(...): Cannot initialize a transaction when there is already an outstanding transaction.') : _prodInvariant('27') : void 0;
    var errorThrown;
    var ret;
    try {
      this._isInTransaction = true;
      errorThrown = true;
      this.initializeAll(0);
      ret = method.call(scope, a, b, c, d, e, f);
      errorThrown = false;
    } finally {
      try {
        if (errorThrown) {
          try {
            this.closeAll(0);
          } catch (err) {}
        } else {
          this.closeAll(0);
        }
      } finally {
        this._isInTransaction = false;
      }
    }
    return ret;
  },

  initializeAll: function (startIndex) {
    var transactionWrappers = this.transactionWrappers;
    for (var i = startIndex; i < transactionWrappers.length; i++) {
      var wrapper = transactionWrappers[i];
      try {
        this.wrapperInitData[i] = OBSERVED_ERROR;
        this.wrapperInitData[i] = wrapper.initialize ? wrapper.initialize.call(this) : null;
      } finally {
        if (this.wrapperInitData[i] === OBSERVED_ERROR) {
          try {
            this.initializeAll(i + 1);
          } catch (err) {}
        }
      }
    }
  },

  closeAll: function (startIndex) {
    !this.isInTransaction() ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Transaction.closeAll(): Cannot close transaction when none are open.') : _prodInvariant('28') : void 0;
    var transactionWrappers = this.transactionWrappers;
    for (var i = startIndex; i < transactionWrappers.length; i++) {
      var wrapper = transactionWrappers[i];
      var initData = this.wrapperInitData[i];
      var errorThrown;
      try {
        errorThrown = true;
        if (initData !== OBSERVED_ERROR && wrapper.close) {
          wrapper.close.call(this, initData);
        }
        errorThrown = false;
      } finally {
        if (errorThrown) {
          try {
            this.closeAll(i + 1);
          } catch (e) {}
        }
      }
    }
    this.wrapperInitData.length = 0;
  }
};

module.exports = TransactionImpl;
複製程式碼

Transaction的主要作用就是包裝一個函式，函式的執行交給Transaction，同時Transaction會在函式執行前後執行被注入的Wrappers，一個Wrapper有二個方法initialize和close。Wrapper是通過getTransactionWrappers方法注入的

程式碼很簡單，很容易看明白我就具體說明下每個函式和關鍵屬性的作用

  1. perform執行注入的函式fn和wrappers，執行順序為initializeAll--> fn -->closeAll
  2. initializeAll執行所有Wrapper的initialize方法
  3. closeAll執行所有Wrapper的close方法
  4. reinitializeTransaction初始化
  5. isInTransaction 判斷事務是否在執行

瞭解了Transaction我們再來仔細分析下上面的程式碼

var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
    /* useCreateElement */
    !shouldReuseMarkup &&
        ReactDOMFeatureFlags.useCreateElement
);
複製程式碼

ReactReconcileTransaction對transition做了一成包裝

ReactReconcileTransaction

 var TRANSACTION_WRAPPERS = [
    SELECTION_RESTORATION,
    EVENT_SUPPRESSION,
    ON_DOM_READY_QUEUEING
];

if ("development" !== "production") {
    TRANSACTION_WRAPPERS.push({
        initialize:
            ReactInstrumentation.debugTool.onBeginFlush,
        close: ReactInstrumentation.debugTool.onEndFlush
    });
}

/**
 * Currently:
 * - The order that these are listed in the transaction is critical:
 * - Suppresses events.
 * - Restores selection range.
 *
 * Future:
 * - Restore document/overflow scroll positions that were unintentionally
 *   modified via DOM insertions above the top viewport boundary.
 * - Implement/integrate with customized constraint based layout system and keep
 *   track of which dimensions must be remeasured.
 *
 * @class ReactReconcileTransaction
 */
 
function ReactReconcileTransaction(useCreateElement) {
    this.reinitializeTransaction();
    this.renderToStaticMarkup = false;
    this.reactMountReady = CallbackQueue.getPooled(
        null
    );
    this.useCreateElement = useCreateElement;

}

var Mixin = {
    /**
     * @see Transaction
     * @abstract
     * @final
     * @return {array<object>} List of operation wrap procedures.
     *   TODO: convert to array<TransactionWrapper>
     */
    getTransactionWrappers: function() {
        return TRANSACTION_WRAPPERS;
    },

    /**
     * @return {object} The queue to collect `onDOMReady` callbacks with.
     */
    getReactMountReady: function() {
        return this.reactMountReady;
    },

    /**
     * @return {object} The queue to collect React async events.
     */
    getUpdateQueue: function() {
        return ReactUpdateQueue;
    },

    /**
     * Save current transaction state -- if the return value from this method is
     * passed to `rollback`, the transaction will be reset to that state.
     */
    checkpoint: function() {
        // reactMountReady is the our only stateful wrapper
        return this.reactMountReady.checkpoint();
    },

    rollback: function(checkpoint) {
        this.reactMountReady.rollback(checkpoint);
    },

    /**
     * `PooledClass` looks for this, and will invoke this before allowing this
     * instance to be reused.
     */
    destructor: function() {
        CallbackQueue.release(this.reactMountReady);
        this.reactMountReady = null;
    }
};
複製程式碼

getTransactionWrappers方法裡面返回的是TRANSACTION_WRAPPERS他的值有4個也就是說注入了四個Wrapper。具體看看ON_DOM_READY_QUEUEING這個Wraper;

 var ON_DOM_READY_QUEUEING = {
    /**
     * Initializes the internal `onDOMReady` queue.
     */
    initialize: function() {
        this.reactMountReady.reset();
    },

    /**
     * After DOM is flushed, invoke all registered `onDOMReady` callbacks.
     */
    close: function() {
        this.reactMountReady.notifyAll();
    }
};
複製程式碼

this.reactMountReady是一個佇列, 在元件構建真實dom之後

transaction
    .getReactMountReady()
    .enqueue(function() {
        measureLifeCyclePerf(
            function() {
                return inst.componentDidMount();
            },
            _this._debugID,
            "componentDidMount"
        );
    });
複製程式碼

會將componentDidMount方法push進入佇列裡面. 而mountComponentIntoNode(插入到了document中了)執行完畢之後會執行ON_DOM_READY_QUEUEING.close方法也就是this.reactMountReady.notifyAll()方法,釋放佇列中所有的元素。

componentDidMount是通過一個佇列來維護的，因為佇列是先進先出的.而最裡層的元件是最新執行！

元件的更新this.setState

緩緩，明天更新！

相關推薦

React原始碼解析（3）：元件的生命週期

元件的生命週期分為二個部分 元件的掛載 元件的更新 元件的掛載 在上一章對於元件的掛載已經做了詳細的說明，但是涉及到元件生命週期部分被略過.接下來我將詳細的對其說明. 元件的掛載涉及到二個比較重要的生命週期方法componentWillMount和componentDidMount. c

React原始碼解析（2）：元件的掛載

上一章jsx語法是如何解析的講到了 <div> <div>1</div> <div>2</div> <div>3</div> </div> 複製程式碼 jsx語法是如何解析為虛擬dom的,

spring 核心與原始碼解析（3）：AOP如何使用

AOP，面向切面程式設計，是Spring的另一核心。 在剖析AOP的實現原理前，需要先對如何使用AOP做一番探索，本節仍然使用spring boot作為實驗框架。 首先說明AOP的使用場景：日誌記錄，事務記錄等。 即可以看出，AOP的使用方式，採取類似注入

OKHttp 3.10原始碼解析（三）：快取機制

本篇我們來講解OKhttp的快取處理，在網路請求中合理地利用本地快取能有效減少網路開銷，提高響應速度。HTTP報頭也定義了很多控制快取策略的域，我們先來認識一下HTTP的快取策略。 一.HTTP快取策略 HTTP快取有多種規則，根據是否需要向伺服器發起請求來分類，我們將其分為兩大類：強制

OKHttp 3.10原始碼解析（二）：攔截器鏈

本篇文章我們主要來講解OKhttp的攔截器鏈，攔截器是OKhttp的主要特色之一，通過攔截器鏈，我們可以對request或response資料進行相關處理，我們也可以自定義攔截器interceptor。 上一篇文章中我們講到，不管是OKhttp的同步請求還是非同步請求，都會呼叫RealCal

OKHttp 3.10原始碼解析（一）：執行緒池和任務佇列

OKhttp是Android端最火熱的網路請求框架之一，它以高效的優點贏得了廣大開發者的喜愛，下面是OKhttp的主要特點： 1.支援HTTPS/HTTP2/WebSocket 2.內部維護執行緒池佇列，提高併發訪問的效率 3.內部維護連線池，支援多路複用，減少連線建立開銷 4.

Spring原始碼解析（二）：obtainFreshBeanFactory

spring的ApplicationContext容器的初始化流程主要由AbstractApplicationContext類中的refresh方法實現。 而refresh()方法中獲取新工廠的主要是由obtainFreshBeanFactory()實現的，後續的操作均是beanFactoty的進一步處理。

Spring原始碼解析（三）：父子容器的概念

　　相信大家現在在使用spring專案開發時可能不只是單單使用spring一個框架進行開發， 可能會用到現在主流的ssm，spring和springmvc一起使用。 　　而在一起使用的時候我就發現了一個問題，在web.xml配置spring容器初始化的時候存在一個問題。 　 　　一般我們在配置sprin

Java 集合原始碼解析（1）：Iterator

Java 提供的 集合類都在 Java.utils 包下，其中包含了很多 List, Set, Map, Queue… 它們的關係如下面這張類圖所示： 可以看到，Java 集合主要分為兩類：Collection 和 Map. 而 Collection 又繼承了 Iter

LinkedBlockingQueue原始碼解析（3）

此文已由作者趙計剛授權網易雲社群釋出。 歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。 4.3、public E take() throws InterruptedException 原理： 將隊頭元素出隊，如果佇列空了，一直阻塞，直到佇列不為空或者執行緒被中斷 使用方法

ConcurrentHashMap原始碼解析（3）

此文已由作者趙計剛授權網易雲社群釋出。 歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。 4、get(Object key) 使用方法： map.get("hello"); 原始碼：  ConcurrentHashMap的get(Object key)  

ElasticSearch原始碼解析（三）：索引建立

我們先來看看索引建立的事例程式碼： Directory directory = FSDirectory.getDirectory("/tmp/testindex"); // Use standard analyzer Analyzer analyzer = new

ActiveMQ原始碼解析（一）：聊聊broker

一、Broker     訊息佇列核心，相當於一個控制中心，負責路由訊息、儲存訂閱和連線、訊息確認和控制事務 1.Broker介面     定義了一些獲取broker本身相關資訊，新增connection、destination、session、訊息生產者、控制事務

jdk1.8原始碼解析（1）：HashMap原始碼解析

jdk1.8 HashMap資料結構 　　　　　　　　　　　　　　圖1-HashMap類圖　　　　　　　　　　　　　　　　　　　　圖2-TreeNode類圖　　　　 由圖1-HashMap類圖可知HashMap底層資料結構是由一個Node<K,V>的陣列構成。具體Node<

Android Butterknife 框架原始碼解析（3）——Butterknife 8.7.0原始碼分析

前文連結地址：《Android Butterknife 框架原始碼解析（1）——ButterKnife的使用》 http://blog.csdn.net/bit_kaki/article/details/74926076《Android Butterknife 框架原始碼解析

ElasticSearch原始碼解析（五）：排序（評分公式）

轉載自：http://blog.csdn.net/molong1208/article/details/50623948 一、目的 一個搜尋引擎使用的時候必定需要排序這個模組，一般情況下在不選擇按照某一欄位排序的情況下，都是按照打分的高低進行一個預設排序的，所以如

Spring原始碼解析（4）：IOC過程下

上文說到populateBean方法中，對被@Autowired註解的屬性方法進行注入。在這之後，BeanFactory執行applyPropertyValues方法，這個方法中，一個是把之前解析出來的屬性值設定到bean中去；一個是繼續解析出BeanDefinition中定

roaringbitmap 原始碼解析（3）底層容器相互add過程

今天主要講述roaringbitmap的add計算。 先判斷高位是否存在相同的，如果相同，再低位的容器相add。否則，直接跳過 public static RoaringBitmap and(final RoaringBitmap x1, final

Spring原始碼解析（七）：Spring AOP中對攔截器呼叫的實現

前面我們分析了Spring AOP實現中得到Proxy物件的過程，下面我們看看在Spring AOP中攔截器鏈是怎樣被呼叫的，也就是Proxy模式是怎樣起作用的，或者說Spring是怎樣為我們提供AOP功能的； 在JdkDynamicAopProxy中生成Proxy物件的時

yolo遠嗎解析（3）：視頻檢測流程

pre spa webcam led lov 技術分享 -h open ear 根據前文所說yolo代碼邏輯： ├── examples │ ├── darknet.c(主程序) │ │── xxx1.c │ └── xxx2.c │ ├── i