IOC(控制反转)是一种编程思想，可以解耦组件，提高组件复用性。
本文包括两部分：
介绍IOC概念
IOC在React中的应用
IOC是什么
让我们来看个例子：
我们有个士兵的类，在类内部会实例化一种武器：
复制
![[[386478]]](https://s6.51cto.com/oss/202103/10/700179becc851a6ab381457a5b3229e8.png){kind=link}
class Soldier { constructor() { // 这里我们实例化一把步枪 this.weapon = new Rifle(); } attack() { this.weapon.attack(); } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
士兵的武器应该是多种多样的，但是在Soldier类内部依赖了Rifle。
所以当我们想将武器从步枪换为手榴弹时，只能这样改写：
复制
// ... constructor() { // 这里我们实例化一把步枪 // this.weapon = new Rifle(); // 这里我们实例化一个手榴弹 this.weapon = new Grenade(); } // ...
1.
2.
3.
4.
5.
6.
7.
8.
理想的状态是：士兵不依赖具体的武器，弹药库里有什么武器，就用什么武器。
在这种情况下，IOC作为弹药库，就派上了用场。
让我们来改写代码：
第一步：DI(Dependency Injection)
改写的第一步是使士兵不依赖具体的武器，而是将武器作为依赖注入给士兵：
复制
class Soldier { // 将武器作为依赖注入 constructor(weapon) { this.weapon = weapon; } attack() { this.weapon.attack(); } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
我们将武器的实例作为Soldier的参数传入，于是可以如下调用：
复制
const s1 = new Soldier(new Rifle()); const s2 = new Soldier(new Grenade());
1.
2.
这一步被称为DI(依赖注入)。
第二步：IOC容器
那么武器从哪儿来呢?接下来来打造我们的武器库：
复制
class Armory { constructor() { this.weapon = null; } setWeapon(weapon) { this.weapon = weapon; } getWeapon() { return this.weapon; } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
武器库支持存武器(setWeapon)和取武器(getWeapon)。
现在，士兵不依赖具体武器，只需要去武器库取武器：
复制
const armory1 = new Armory(); class Soldier { // 将武器作为依赖注入 constructor(armory) { this.weapon = armory.getWeapon(); } attack() { this.weapon.attack(); } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
改造前的依赖关系：
复制
士兵 --> 武器
1.
改造前原先应用(士兵)拥有依赖的完全控制权。
改造后的依赖关系：
复制
士兵 --> 武器库 <-- 武器
1.
改造后应用(士兵)与服务提供方(武器)解耦，他们通过IOC容器(武器库)联系。
从Demo也能看出IOC与DI的关系：DI是实现IOC编程思想的一种方式。
除了DI外，另一种实现方式是Dependency Lookup(依赖查找)，简称DL。
IOC与React
在React中，为组件传递的props就是一种DI实现。
为了跨层级传递数据，我们常使用Context API：
复制
function Name() { const {name} = useContext(nameContext); reutrn <h1>{name}</h1>; }
1.
2.
3.
4.
context将依赖提供方(name)与依赖使用方(Name)隔离，可以看作是一种IOC实现。
所以说，合理使用React可以充分利用IOC的思想解耦代码逻辑。
接下来我们看看专业的DI库如何与React结合：
InversifyJS
InversifyJS[1]是一个强大、轻量的DI库。
首先我们实现依赖(武器的实现)：
复制
// armory.ts import { injectable } from "inversify"; export interface IArmory<T> { attack(): T; } @injectable() export class Armory implements IArmory<string> { attack() { return "Rifle biubiubiu～"; } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
通过inversify提供的injectable decorator标记该class是可被注入的。
接下来实现需求方(士兵的实现)：
复制
import React from "react"; import { IArmory } from "./armory"; export class Soldier extends React.Component { private readonly Armory: IArmory<string>; render() { return <h1 onClick={() => this.armory.attack()}>I am a soldier</h1>; } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
最后实例化IOC容器，连接需求方与依赖：
复制
import { Container } from "inversify"; import { IArmory, Armory } from "./armory"; // 实例化IOC容器 export const container = new Container(); // 将依赖方注入容器，其中armory为该依赖的ID container.bind<IArmory<string>>("armory").to(Armory);
1.
2.
3.
4.
5.
6.
7.
至此，完成一个React组件的简单IOC。
业务逻辑的更多依赖都可以通过注入IOC容器来实现解耦。
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