IOC(控制反轉(zhuǎn))是一種編程思想，可以解耦組件，提高組件復(fù)用性。

創(chuàng)新互聯(lián)一直通過網(wǎng)站建設(shè)和網(wǎng)站營(yíng)銷幫助企業(yè)獲得更多客戶資源。 以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)互聯(lián)產(chǎn)品、全網(wǎng)整合營(yíng)銷推廣服務(wù)為核心業(yè)務(wù)。10年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡(jiǎn)單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

本文包括兩部分：

1. 介紹IOC概念
2. IOC在React中的應(yīng)用

IOC是什么

讓我們來看個(gè)例子：

我們有個(gè)士兵的類，在類內(nèi)部會(huì)實(shí)例化一種武器：

 
 
 
 

  
  
  
  
class Soldier {
  
  
  
  
  constructor() {
  
  
  
  
    // 這里我們實(shí)例化一把步槍
  
  
  
  
    this.weapon = new Rifle();
  
  
  
  
  }
  
  
  
  
  attack() {
  
  
  
  
    this.weapon.attack();
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

士兵的武器應(yīng)該是多種多樣的，但是在Soldier類內(nèi)部依賴了Rifle。

所以當(dāng)我們想將武器從步槍換為手榴彈時(shí)，只能這樣改寫：

 
 
 
 

  
  
  
  
// ...
  
  
  
  
constructor() {
  
  
  
  
  // 這里我們實(shí)例化一把步槍
  
  
  
  
  // this.weapon = new Rifle();
  
  
  
  
  // 這里我們實(shí)例化一個(gè)手榴彈
  
  
  
  
  this.weapon = new Grenade();
  
  
  
  
}
  
  
  
  
// ...
 
 
 
 

理想的狀態(tài)是：士兵不依賴具體的武器，彈藥庫里有什么武器，就用什么武器。

在這種情況下，IOC作為彈藥庫，就派上了用場(chǎng)。

讓我們來改寫代碼：

第一步：DI(Dependency Injection)

改寫的第一步是使士兵不依賴具體的武器，而是將武器作為依賴注入給士兵：

 
 
 
 

  
  
  
  
class Soldier {
  
  
  
  
  // 將武器作為依賴注入
  
  
  
  
  constructor(weapon) {
  
  
  
  
    this.weapon = weapon;
  
  
  
  
  }
  
  
  
  
  attack() {
  
  
  
  
    this.weapon.attack();
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

我們將武器的實(shí)例作為Soldier的參數(shù)傳入，于是可以如下調(diào)用：

 
 
 
 

  
  
  
  
const s1 = new Soldier(new Rifle());
  
  
  
  
const s2 = new Soldier(new Grenade());
 
 
 
 

這一步被稱為DI(依賴注入)。

第二步：IOC容器

那么武器從哪兒來呢?接下來來打造我們的武器庫：

 
 
 
 

  
  
  
  
class Armory {
  
  
  
  
  constructor() {
  
  
  
  
    this.weapon = null;
  
  
  
  
  }
  
  
  
  
  setWeapon(weapon) {
  
  
  
  
    this.weapon = weapon;
  
  
  
  
  }
  
  
  
  
  getWeapon() {
  
  
  
  
    return this.weapon;
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

武器庫支持存武器(setWeapon)和取武器(getWeapon)。

現(xiàn)在，士兵不依賴具體武器，只需要去武器庫取武器：

 
 
 
 

  
  
  
  
const armory1 = new Armory();
  
  
  
  

  
  
  
  
class Soldier {
  
  
  
  
  // 將武器作為依賴注入
  
  
  
  
  constructor(armory) {
  
  
  
  
    this.weapon = armory.getWeapon();
  
  
  
  
  }
  
  
  
  
  attack() {
  
  
  
  
    this.weapon.attack();
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

改造前的依賴關(guān)系：

 
 
 
 

  
  
  
  
士兵 --> 武器
 
 
 
 

改造前原先應(yīng)用(士兵)擁有依賴的完全控制權(quán)。

改造后的依賴關(guān)系：

 
 
 
 

  
  
  
  
士兵 --> 武器庫 <-- 武器
 
 
 
 

改造后應(yīng)用(士兵)與服務(wù)提供方(武器)解耦，他們通過IOC容器(武器庫)聯(lián)系。

從Demo也能看出IOC與DI的關(guān)系：DI是實(shí)現(xiàn)IOC編程思想的一種方式。

除了DI外，另一種實(shí)現(xiàn)方式是Dependency Lookup(依賴查找)，簡(jiǎn)稱DL。

IOC與React

在React中，為組件傳遞的props就是一種DI實(shí)現(xiàn)。

為了跨層級(jí)傳遞數(shù)據(jù)，我們常使用Context API：

 
 
 
 

  
  
  
  
function Name() {
  
  
  
  
  const {name} = useContext(nameContext);
  
  
  
  
  reutrn 
{name}
;
  
  
  
  
}
 
 
 
 

 context將依賴提供方(name)與依賴使用方(Name)隔離，可以看作是一種IOC實(shí)現(xiàn)。

所以說，合理使用React可以充分利用IOC的思想解耦代碼邏輯。

接下來我們看看專業(yè)的DI庫如何與React結(jié)合：

InversifyJS

InversifyJS[1]是一個(gè)強(qiáng)大、輕量的DI庫。

首先我們實(shí)現(xiàn)依賴(武器的實(shí)現(xiàn))：

 
 
 
 

  
  
  
  
// armory.ts
  
  
  
  
import { injectable } from "inversify";
  
  
  
  

  
  
  
  
export interface IArmory {
  
  
  
  
  attack(): T;
  
  
  
  
}
  
  
  
  

  
  
  
  
@injectable()
  
  
  
  
export class Armory implements IArmory {
  
  
  
  
  attack() {
  
  
  
  
    return "Rifle biubiubiu～";
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

通過inversify提供的injectable decorator標(biāo)記該class是可被注入的。

接下來實(shí)現(xiàn)需求方(士兵的實(shí)現(xiàn))：

 
 
 
 

  
  
  
  
import React from "react";
  
  
  
  
import { IArmory } from "./armory";
  
  
  
  

  
  
  
  
export class Soldier extends React.Component {
  
  
  
  
  private readonly Armory: IArmory;
  
  
  
  

  
  
  
  
  render() {
  
  
  
  
    return  this.armory.attack()}>I am a soldier;
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

 最后實(shí)例化IOC容器，連接需求方與依賴：

 
 
 
 

  
  
  
  
import { Container } from "inversify";
  
  
  
  
import { IArmory, Armory } from "./armory";
  
  
  
  

  
  
  
  
// 實(shí)例化IOC容器
  
  
  
  
export const container = new Container();
  
  
  
  
// 將依賴方注入容器，其中armory為該依賴的ID
  
  
  
  
container.bind>("armory").to(Armory);
 
 
 
 

至此，完成一個(gè)React組件的簡(jiǎn)單IOC。

業(yè)務(wù)邏輯的更多依賴都可以通過注入IOC容器來實(shí)現(xiàn)解耦。

Hooks同樣可以通過inversify完成IOC，參考Dependency injection in React using InversifyJS. Now with React Hooks[2]

參考資料

[1]InversifyJS:

https://github.com/inversify/InversifyJS

[2]Dependency injection in React using InversifyJS. Now with React Hooks:

https://itnext.io/dependency-injection-in-react-using-inversifyjs-now-with-react-hooks-64f7f077cde6

當(dāng)前標(biāo)題：詳解使用IOC解耦React組件
網(wǎng)頁地址：http://www.5511xx.com/article/dhdpiod.html