亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

glumes / 2998人閱讀

摘要：依賴注入和控制反轉(zhuǎn)，這兩個詞經(jīng)常一起出現(xiàn)。一句話表述他們之間的關(guān)系依賴注入是控制反轉(zhuǎn)的一種實現(xiàn)方式。而兩者有大量的代碼都是可以共享的，這就是依賴注入的使用場景了。下一步就是創(chuàng)建具體的依賴內(nèi)容，然后注入到需要的地方這里的等于這個對象。

前言

React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導致其代碼抽象化程度很高，嵌套層級非常深，閱讀其源碼是一個非常艱辛的過程。在學習 React 源碼的過程中，給我?guī)椭畲蟮木褪沁@個系列文章，于是決定基于這個系列文章談一下自己的理解。本文會大量用到原文中的例子，想體會原汁原味的感覺，推薦閱讀原文。

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

正文

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

二、依賴注入的基本概念

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

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

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

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

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

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

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

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

三、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 都是一個對象，對象內(nèi)定義了一個或多個 inject 的方法來注入對應(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 個方法注入進去的。

有了上面的內(nèi)容，相當于定義好需要依賴的內(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 這個對象。而 inject 方法，就是在前文的 ReactDOM.js 中調(diào)用的方法ReactDefaultInjection.inject()。

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

四、總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/99044.html

相關(guān)文章

  • React 源碼深度解讀（九）：單個元素更新

    摘要：作為聲明式的框架，接管了所有頁面更新相關(guān)的操作。是用于內(nèi)部操作的實例，這里將它的初始化為空數(shù)組并插入一個新的。連續(xù)次后，期望的結(jié)果應(yīng)該是。原因很簡單，因為次的時候，取到的都是在完后不會同步更新。 前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導致其代碼抽象化程度很高，嵌套層級非常深，閱讀其源碼是一個非常艱辛的過程...

    kid143 評論0 收藏0

  • React 源碼深度解讀（八）：事務(wù) - Part 2

    摘要：前言是一個十分龐大的庫，由于要同時考慮和，還有服務(wù)器渲染等，導致其代碼抽象化程度很高，嵌套層級非常深，閱讀其源碼是一個非常艱辛的過程。在學習源碼的過程中，給我?guī)椭畲蟮木褪沁@個系列文章，于是決定基于這個系列文章談一下自己的理解。 前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導致其代碼抽象化程度很高，嵌套層級非常...

    airborne007 評論0 收藏0

  • React 源碼深度解讀（三）：首次 DOM 元素渲染 - Part 3

    摘要：在學習源碼的過程中，給我?guī)椭畲蟮木褪沁@個系列文章，于是決定基于這個系列文章談一下自己的理解。到此為止，首次渲染就完成啦總結(jié)從啟動到元素渲染到頁面，并不像看起來這么簡單，中間經(jīng)歷了復(fù)雜的層級調(diào)用。 前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導致其代碼抽象化程度很高，嵌套層級非常深，閱讀其源碼是一個非常艱辛的過...

    U2FsdGVkX1x 評論0 收藏0

  • React 源碼深度解讀（七）：事務(wù) - Part 1

    摘要：在學習源碼的過程中，給我?guī)椭畲蟮木褪沁@個系列文章，于是決定基于這個系列文章談一下自己的理解。說明就算拋出了錯誤，部分的代碼也要繼續(xù)執(zhí)行，隨后再將錯誤往上層代碼拋。和都能保證其中一個成員拋出錯誤的時候，余下的能繼續(xù)執(zhí)行。 前言 React 是一個十分龐大的庫，由于要同時考慮 ReactDom 和 ReactNative ，還有服務(wù)器渲染等，導致其代碼抽象化程度很高，嵌套層級非常深，閱讀...

    KavenFan 評論0 收藏0

  • React 源碼深度解讀（二）：首次 DOM 元素渲染 - Part 2

    摘要：本文將要講解的調(diào)用棧是下面這個樣子的平臺無關(guān)相關(guān)如果看源碼，我們會留意到很多相關(guān)的代碼，我們暫時先將其忽略，會在后續(xù)的文章中進行講解?，F(xiàn)在我們來看一下各實例間的關(guān)系目前為止的調(diào)用棧平臺無關(guān)相關(guān)下一篇講解三總結(jié)本文講解了轉(zhuǎn)化為的過程。 歡迎關(guān)注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 R...

    wean 評論0 收藏0

發(fā)表評論

0條評論

glumes

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<