1. 程式人生 > >React 原始碼中的依賴注入方法

React 原始碼中的依賴注入方法

一、前言

依賴注入(Dependency Injection)這個概念的興起已經有很長時間了,把這個概念融入到框架中達到出神入化境地的,非Spring莫屬。然而在前端領域,似乎很少會提到這個概念,難道前端的程式碼就不需要解耦嗎?前端的程式碼就沒有依賴了?本文將以 React 的原始碼為例子,看看它是如何使用依賴注入這一設計模式的。

二、依賴注入的基本概念

在看程式碼之前,有必要先簡單介紹一下依賴注入的基本概念。依賴注入和控制反轉(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);
}
}

也就是說,不需要自己來建立依賴的物件了,由外部傳入,這就是依賴注入!

三、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()。

上述各個檔案整體的呼叫關係如下:

四、總結

本文介紹了依賴注入的基本概念,並結合 React 的原始碼講解具體的使用場景。這樣做的主要目的是解耦,可以根據實際的上下文傳入不同的依賴物件,優雅的實現了程式碼的抽象與複用。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。