React 源碼深度解讀（六）：依賴注入

• 前言

React 是一個十分龐大的庫，因爲要同時考慮 ReactDom 和 ReactNative ，還有服務器渲染等，致使其代碼抽象化程度很高，嵌套層級很是深，閱讀其源碼是一個很是艱辛的過程。在學習 React 源碼的過程當中，給我幫助最大的就是這個系列文章，因而決定基於這個系列文章談一下本身的理解。本文會大量用到原文中的例子，想體會原汁原味的感受，推薦閱讀原文。

本系列文章基於 React 15.4.2 ，如下是本系列其它文章的傳送門：
React 源碼深度解讀（一）：首次 DOM 元素渲染 - Part 1
React 源碼深度解讀（二）：首次 DOM 元素渲染 - Part 2
React 源碼深度解讀（三）：首次 DOM 元素渲染 - Part 3
React 源碼深度解讀（四）：首次自定義組件渲染 - Part 1
React 源碼深度解讀（五）：首次自定義組件渲染 - Part 2
React 源碼深度解讀（六）：依賴注入
React 源碼深度解讀（七）：事務 - Part 1
React 源碼深度解讀（八）：事務 - Part 2
React 源碼深度解讀（九）：單個元素更新
React 源碼深度解讀（十）：Diff 算法詳解

• 正文

依賴注入（Dependency Injection）這個概念的興起已經有很長時間了，把這個概念融入到框架中達到出神入化境地的，非Spring莫屬。然而在前端領域，彷佛不多會提到這個概念，難道前端的代碼就不須要解耦嗎？前端的代碼就沒有依賴了？本文將以 React 的源碼爲例子，看看它是如何使用依賴注入這一設計模式的。

• 2、依賴注入的基本概念

在看代碼以前，有必要先簡單介紹一下依賴注入的基本概念。依賴注入和控制反轉（Inversion of Control），這兩個詞常常一塊兒出現。一句話表述他們之間的關係：依賴注入是控制反轉的一種實現方式。另外一種方式叫依賴查找（Dependency Lookup）。

在控制不反轉的狀況下，某個類若是依賴另外一個類，它會本身來建立依賴：

class Person {
    eat() {
        const dinner = new Dinner('法國菜');
        console.log('開飯啦！，今晚本身作：', dinner.name);
    }
}

class Dinner {
    constructor(name) {
        this.name = name;
    }
}

假設一我的要吃飯，若是控制不反轉，就須要本身來作，像上面的代碼同樣要本身new Dinner。

若是使用控制反轉，吃什麼就不用本身費腦子了，別人給我作好放到我面前，我直接吃就好！

class Person {
    eat(dinner) {
        console.log('開飯啦！，今晚有大廚給我作：', dinner.name);
    }
}

也就是說，不須要本身來建立依賴的對象了，由外部傳入，這就是依賴注入！

• 3、React 中的依賴注入

衆所周知，React 除了能夠在瀏覽器運行外（ReactDOM），也能夠製做 App 在手機端運行（ReactNative）。而二者有大量的代碼都是能夠共享的，這就是依賴注入的使用場景了。

咱們來看下具體是如何注入的：

// ReactDOM.js
var ReactDefaultInjection = require('ReactDefaultInjection');
ReactDefaultInjection.inject();

// ReactNative.js
var ReactNativeDefaultInjection = require('ReactNativeDefaultInjection');
ReactNativeDefaultInjection.inject();

注入的位置都在框架代碼最開始加載的位置。下面以 ReactDOM 爲例子，詳細講解注入的邏輯。

先來看看須要注入的對象都有哪些，定義在 ReactInjection.js 這個文件當中：

var DOMProperty = require('DOMProperty');
var EventPluginHub = require('EventPluginHub');
var EventPluginUtils = require('EventPluginUtils');
var ReactComponentEnvironment = require('ReactComponentEnvironment');
var ReactEmptyComponent = require('ReactEmptyComponent');
var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
var ReactHostComponent = require('ReactHostComponent');
var ReactUpdates = require('ReactUpdates');

var ReactInjection = {
  Component: ReactComponentEnvironment.injection,
  DOMProperty: DOMProperty.injection,
  EmptyComponent: ReactEmptyComponent.injection,
  EventPluginHub: EventPluginHub.injection,
  EventPluginUtils: EventPluginUtils.injection,
  EventEmitter: ReactBrowserEventEmitter.injection,
  HostComponent: ReactHostComponent.injection,
  Updates: ReactUpdates.injection,
};

module.exports = ReactInjection;

這裏面每個 injection 都是一個對象，對象內定義了一個或多個 inject 的方法來注入對應的內容。以ReactUpdates.injection爲例子：

// ReactUpdates.js
var ReactUpdatesInjection = {
    injectReconcileTransaction: function (ReconcileTransaction) {
        ...
        ReactUpdates.ReactReconcileTransaction = ReconcileTransaction;
    },

    injectBatchingStrategy: function (_batchingStrategy) {
        ...
        batchingStrategy = _batchingStrategy;
    },
};

var ReactUpdates = {
    ...
    injection: ReactUpdatesInjection,
};

能夠看到 ReactUpdates 依賴的ReactReconcileTransaction和batchingStrategy就是經過這 2 個方法注入進去的。

有了上面的內容，至關於定義好須要依賴的內容了。下一步就是建立具體的依賴內容，而後注入到須要的地方：

// ReactDefaultInjection.js
var ReactInjection = require('ReactInjection');
var ReactReconcileTransaction = require('ReactReconcileTransaction');
var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');

...

function inject() {
    ...

    ReactInjection.Updates.injectReconcileTransaction(
        ReactReconcileTransaction
    );
    ReactInjection.Updates.injectBatchingStrategy(
        ReactDefaultBatchingStrategy
    );
}

這裏的 ReactInjection.Updates 等於 ReactUpdates.injection 這個對象。而 inject 方法，就是在前文的 ReactDOM.js 中調用的方法ReactDefaultInjection.inject()。

上述各個文件總體的調用關係以下：

• 4、總結

本文介紹了依賴注入的基本概念，並結合 React 的源碼講解具體的使用場景。這樣作的主要目的是解耦，能夠根據實際的上下文傳入不一樣的依賴對象，優雅的實現了代碼的抽象與複用。