一、前言

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了新源免費(fèi)建站歡迎大家使用！

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

二、依賴(lài)注入的基本概念

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

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

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

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

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

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

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

三、React 中的依賴(lài)注入

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

我們來(lái)看下具體是如何注入的：

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

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

先來(lái)看看需要注入的對(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 的方法來(lái)注入對(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 依賴(lài)的ReactReconcileTransaction和batchingStrategy就是通過(guò)這 2 個(gè)方法注入進(jìn)去的。

有了上面的內(nèi)容，相當(dāng)于定義好需要依賴(lài)的內(nèi)容了。下一步就是創(chuàng)建具體的依賴(lài)內(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)系如下：

四、總結(jié)

本文介紹了依賴(lài)注入的基本概念，并結(jié)合 React 的源碼講解具體的使用場(chǎng)景。這樣做的主要目的是解耦，可以根據(jù)實(shí)際的上下文傳入不同的依賴(lài)對(duì)象，優(yōu)雅的實(shí)現(xiàn)了代碼的抽象與復(fù)用。

文章同步發(fā)布： https://www.geek-share.com/detail/2752558290.html

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：React源碼中的依賴(lài)注入方法-創(chuàng)新互聯(lián)
文章來(lái)源：http://chinadenli.net/article18/depcdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、ChatGPT、做網(wǎng)站、標(biāo)簽優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)