【React】1128- 如何在 React 组件中优雅的实现依赖注入
控制反转(Inversion of Control
,缩写为IoC),是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度,其中最常见的方式就是依赖注入(Dependency Injection
,简称DI)。
通过控制反转,对象在被创建的时候,由一个调控系统内所有对象的外界实体将其所依赖的对象的引用传递给它。也可以说,依赖被注入到对象中。
一般这个概念在 Java 中提的比较多,但是在前端领域,似乎很少会提到这个概念,其实用好这个思想无论在前后端一样可以帮助我们的组件解耦,本文将介绍一下依赖注入在 React 中的应用。
为啥需要依赖注入?
依赖注入(更广泛地说就是控制反转)主要用来解决下面几个问题:
模块解耦 - 在代码设计中应用,强制保持代码模块分离。
更好的可复用性 - 让模块复用更加容易。
更好的可测试性 - 通过注入模拟依赖可以更方便测试。
其实, React 本身也内置了对依赖注入的支持。
React 中的依赖注入
下面几个常见的代码,其实都应用了依赖注入的思想,我们来看几个例子:
使用 props 允许依赖注入
function welcome(props) {return <h1> Hello, {props.name}</h1>;
}
welcome
组件通过接收 props
然后生成 html
,别惊讶,我们最常用的 props
其实就是应用了依赖注入的思想。
使用 context 是实现依赖注入的另一种方法
function counter() {const { message } = useContext(MessageContext);return <p>{ message }</p>;
}
由于 context
是沿着组件树向下传递的,我们可以使用组件内部的 hooks
来提取到它。
只使用 jsx 也能实现依赖注入
const ReviewList = props => ( <List resource="/reviews" perPage={50} {...props}> <Datagrid rowClick="edit"> <DateField source="date" /> <CustomerField source="customer_id " /> <ProductField source="product_id" /> <StatusField source="status" /> </Datagrid> </List>
);
perPage
参数被传递给 <List>
组件,然后组件通过 REST API
获取远程数据。
但是,<List>
组件并不会直接渲染数据,相反,它把渲染数据的重任交给了子组件 <Datagrid>
。<Datagrid>
组件的渲染依赖于 <List>
,<List>
是设置这种依赖关系的调用者。
但是,这些策略可能对小型项目有所帮助。在一些大型项目中往往我们需要更灵活的扩展,除了这些基础的应用之外,我们还需要更好地支持依赖注入。
我们来看几个扩展 React 依赖注入支持的库。
InversifyJS
InversifyJS 是一个强大、轻量的依赖注入库,并且使用非常简单,但是把它和 React 组件结合使用还是有些问题。
因为 InversifyJS
默认使用构造函数注入,但是 React 不允许开发者扩展组件的构造函数。我们通过一个例子来看看如何解决这个问题:
import "reflect-metadata";
import * as React from "react";
import { render } from "react-dom";
import { Hello } from "./Hello";const App = () => (<div><Hello /></div>
);render(<App />, document.getElementById("root"));
通过 InversifyJS
提供的 injectable decorator
可以标记这个 class
是可被注入的。
import { injectable } from "inversify";export interface IProvider<T> {provide(): T;
}@injectable()
export class NameProvider implements IProvider<string> {provide() {return "World";}
}
在组件中,我们可以直接调用注入的 provide
方法,而组件内部不用关心它的实现。
import * as React from "react";
import { IProvider } from "./providers";export class Hello extends React.Component {private readonly nameProvider: IProvider<string>;render() {return <h1>Hello {this.nameProvider.provide()}!</h1>;}
}
这就是一个最简单的依赖注入,下面我们再来看看几个 InversifyJS 的扩展库。
inversify-inject-decorators
该工具库主要提供了 lazyInject
之类的方法,它可以给出了一个惰性的注入,意思是在对象初始化时不需要提供依赖,当我们没办法改构造函数时,这个库就派上用场啦。
另外,除了字面上所说的惰性,另外一个非常重要的功能就是允许你将 inversifyJs
集成到任何自己控制类实例创建的库或者框架,比如 React
。
下面是一个 @lazyInject
的使用示例:
import getDecorators from "inversify-inject-decorators";
import { Container, injectable, tagged, named } from "inversify";let container = new Container();
let { lazyInject } = getDecorators(container);
let TYPES = { Weapon: "Weapon" };interface Weapon {name: string;durability: number;use(): void;
}@injectable()
class Sword implements Weapon {public name: string;public durability: number;public constructor() {this.durability = 100;this.name = "Sword";}public use() {this.durability = this.durability - 10;}
}class Warrior {@lazyInject(TYPES.Weapon)public weapon: Weapon;
}container.bind<Weapon>(TYPES.Weapon).to(Sword);let warrior = new Warrior();
console.log(warrior.weapon instanceof Sword); // true
inversify-react
inversify-react
是一个唯一执行依赖注入的库。就像使用 React Context.Provider
一样,我们从这个库也能拿到一个 Provider
:
import { Provider } from 'inversify-react';
...<Provider container={myContainer}>...
</Provider>
然后我们就能在子组件中使用依赖了:
import { resolve, useInjection } from 'inversify-react';
...// In functional component – via hooks
const ChildComponent: React.FC = () => {const foo = useInjection(Foo);...
};// or in class component – via decorated fields
class ChildComponent extends React.Component {@resolveprivate readonly foo: Foo;...
}
react-inversify
虽然和上一个库名字很像,但是两个库的做法是不一样的,这种方法更接近于 React 的思想,因为对象是作为属性传递的,而不是在组件内部实例化。
import * as React from 'react';
import * as inversify from 'inversify';
import { Todos } from "./model";
import { connect } from 'react-inversify';class Dependencies {constructor(todos) {this.todos = todos;}
}inversify.decorate(inversify.injectable(), Dependencies);
inversify.decorate(inversify.inject(Todos.TypeTag), Dependencies, 0);class TodoItemView extends React.Component {// ... use this.props.checked, this.props.text, etc. All these calculated by code below.
}ssed as React properties.
// Mapping function returns final TodoItemView's properties.
export default connect(Dependencies, (deps, ownProps) => ({checked: ownProps.item.isChecked(),text: ownProps.item.getText(),todos: deps.todos,item: ownProps.item
}))(TodoItemView);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as inversify from 'inversify';
import { Provider, ChangeNotification } from 'react-inversify';var container = new inversify.Container(); // your DI container
var changeNotification = new ChangeNotification(); // handles changes in model objectsReactDOM.render(<Provider container={container} changeNotification={changeNotification}><TodoListView /></Provider>,document.getElementById('app')
);
参考:
https://www.npmjs.com/package/inversify-inject-decorators
https://www.npmjs.com/package/inversify-react
https://www.npmjs.com/package/react-inversify
https://blog.bitsrc.io/advanced-dependency-injection-in-react-af962bb94d35
最后
React
生态系统中的许多流行库都在使用依赖注入,例如 React Router
和 Redux
。此外,React
还直接支持依赖注入。
但是,对于一些高级的用法,我们需要类似 InversifyJS
之类的库,选择一个适合你的库吧!希望本文能帮到你。
1. JavaScript 重温系列(22篇全)
2. ECMAScript 重温系列(10篇全)
3. JavaScript设计模式 重温系列(9篇全)
4. 正则 / 框架 / 算法等 重温系列(16篇全)
5. Webpack4 入门(上)|| Webpack4 入门(下)
6. MobX 入门(上) || MobX 入门(下)
7. 120+篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 120+ 篇原创文章
【React】1128- 如何在 React 组件中优雅的实现依赖注入相关推荐
- MVC3 中使用Unity实现依赖注入
前言:前段时间一直在研究依赖注入,不过不是在MVC框架中使用,今天突然想到在MVC中使用Unity实现依赖注入,一时慌了,不知道从何下手,接着就是网上不停的找资料,下面我把我找到的资料分享下,也把我的 ...
- boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现 动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...
- java获取jtable的路径,Java如何在JTable组件中获取选定的单元格?
以下示例显示如何获取选定的行或选定的列,或如何选择JTable组件中的多个单元格.要侦听选择事件,我们可以JTable通过调用JTable.getSelectionModel().addListSel ...
- 在MVC3项目中结合NInject实现依赖注入
解释: 依赖注入:(Dependency Injection),也称之为控制反转. 大致意思就是,让我们的应用程序所依赖的一些外部服务,可以根据需要动态注入,而不是预先在应用程序中明确的约束.这种思想 ...
- Java EE 7中的资源和依赖注入
1.概述 上下文和依赖注入(CDI)是Java EE的一项功能,可帮助融合Java EE 6和更高版本中包含的平台的Web层和事务层. 从技术角度来看,这意味着CDI提供了依赖项注入框架,并且还管理了 ...
- java 单元测试_在springboot中写单元测试解决依赖注入和执行后事务回滚问题
往期文章 「Java并发编程」谈谈Java中的内存模型JMM 面试官:说说你知道多少种线程池拒绝策略 为什么不要在MySQL中使用UTF-8编码方式 前言 很多公司都有写单元测试的硬性要求,在提交代码 ...
- springboot 事务嵌套问题_在springboot中写单元测试解决依赖注入和执行后事务回滚问题...
往期文章 「Java并发编程」谈谈Java中的内存模型JMM 面试官:说说你知道多少种线程池拒绝策略 为什么不要在MySQL中使用UTF-8编码方式 前言 很多公司都有写单元测试的硬性要求,在提交代码 ...
- VUE3组件 (4) 关于 Provide Inject 依赖注入
前言 以下代码和内容的使用都是在setup中,未使用TS. <script setup> </script> VUE3组件 (1) 关于defineProps() VUE3组件 ...
- Spring中控制反转和依赖注入
Spring之IOC控制反转和DI依赖注入 1.控制反转是什么? IOC控制反转,所谓反转是指使用方本身不负责依赖对象的创建和维护,而将对象的管理(创建.维护.销毁)都交给Spring容器管理,在使用 ...
最新文章
- 解读《这就是 OKR》 | OKR 的四大价值
- 007_JDK的Comparator接口
- 力扣:169. 多数元素
- 申请美国计算机科学,美国计算机科学(Computer Science)申请条件
- kubernetes之flannel 网络分析
- 解决ImmediateDeprecationError 用Python获取Yahoo数据
- 怎么将CAD图纸快速导入转换成常见的黑白JPG格式?
- 自动驾驶中车辆的如何使用点云定位?
- Android各版本号及其英文别名
- 计算两向量的旋转角(转)
- 扩计算机内存,如何增加计算机内存,三种方法来扩展计算机内存
- java判断是否是英文_Java 判断输入是否为英文字符
- 解决微信小程序开发工具右上角没有上传按钮
- 技術的變與不變之間...Silverlight 3.0的驚鴻一撇
- SQL中的PROCEDURE
- 小优机器人系统恢复_解决一键还原ghost
- poj 1753 翻转棋子
- JAVA初级游戏项目(大鱼吃小鱼)
- linux 命令xargs,Linux下xargs命令详解
- 算法进阶指南每日一题(碎碎念念)