快捷導(dǎo)航

React 源碼中的依賴注入方法

更新時(shí)間：2018年11月07日 10:38:10 作者：dabai

這篇文章主要介紹了React 源碼中的依賴注入方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一、前言

依賴注入（Dependency Injection）這個(gè)概念的興起已經(jīng)有很長時(shí)間了，把這個(gè)概念融入到框架中達(dá)到出神入化境地的，非Spring莫屬。然而在前端領(lǐng)域，似乎很少會(huì)提到這個(gè)概念，難道前端的代碼就不需要解耦嗎？前端的代碼就沒有依賴了？本文將以 React 的源碼為例子，看看它是如何使用依賴注入這一設(shè)計(jì)模式的。

二、依賴注入的基本概念

在看代碼之前，有必要先簡單介紹一下依賴注入的基本概念。依賴注入和控制反轉(zhuǎn)（Inversion of Control），這兩個(gè)詞經(jīng)常一起出現(xiàn)。一句話表述他們之間的關(guān)系：依賴注入是控制反轉(zhuǎn)的一種實(shí)現(xiàn)方式。另一種方式叫依賴查找（Dependency Lookup）。

在控制不反轉(zhuǎn)的情況下，某個(gè)類如果依賴另一個(gè)類，它會(huì)自己來創(chuàng)建依賴：

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

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

假設(shè)一個(gè)人要吃飯，如果控制不反轉(zhuǎn)，就需要自己來做，像上面的代碼一樣要自己new Dinner。

如果使用控制反轉(zhuǎn)，吃什么就不用自己費(fèi)腦子了，別人給我做好放到我面前，我直接吃就好！

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

也就是說，不需要自己來創(chuàng)建依賴的對(duì)象了，由外部傳入，這就是依賴注入！

三、React 中的依賴注入

眾所周知，React 除了可以在瀏覽器運(yùn)行外（ReactDOM），也可以制作 App 在手機(jī)端運(yùn)行（ReactNative）。而兩者有大量的代碼都是可以共享的，這就是依賴注入的使用場景了。

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

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

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

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

先來看看需要注入的對(duì)象都有哪些，定義在 ReactInjection.js 這個(gè)文件當(dāng)中：

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;

這里面每一個(gè) injection 都是一個(gè)對(duì)象，對(duì)象內(nèi)定義了一個(gè)或多個(gè) inject 的方法來注入對(duì)應(yīng)的內(nèi)容。以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 個(gè)方法注入進(jìn)去的。

有了上面的內(nèi)容，相當(dāng)于定義好需要依賴的內(nèi)容了。下一步就是創(chuàng)建具體的依賴內(nèi)容，然后注入到需要的地方：

// 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 這個(gè)對(duì)象。而 inject 方法，就是在前文的 ReactDOM.js 中調(diào)用的方法ReactDefaultInjection.inject()。

上述各個(gè)文件整體的調(diào)用關(guān)系如下：