前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >如何在 React 组件中优雅的实现依赖注入

如何在 React 组件中优雅的实现依赖注入

作者头像
ConardLi
发布于 2021-07-16 03:28:07
发布于 2021-07-16 03:28:07
5.7K00
代码可运行
举报
文章被收录于专栏:code秘密花园code秘密花园
运行总次数:0
代码可运行

控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度,其中最常见的方式就是依赖注入(Dependency Injection,简称DI)。

通过控制反转,对象在被创建的时候,由一个调控系统内所有对象的外界实体将其所依赖的对象的引用传递给它。也可以说,依赖被注入到对象中。

一般这个概念在 Java 中提的比较多,但是在前端领域,似乎很少会提到这个概念,其实用好这个思想无论在前后端一样可以帮助我们的组件解耦,本文将介绍一下依赖注入在 React 中的应用。

为啥需要依赖注入?

依赖注入(更广泛地说就是控制反转)主要用来解决下面几个问题:

  • 模块解耦 - 在代码设计中应用,强制保持代码模块分离。
  • 更好的可复用性 - 让模块复用更加容易。
  • 更好的可测试性 - 通过注入模拟依赖可以更方便测试。

其实, React 本身也内置了对依赖注入的支持。

React 中的依赖注入

下面几个常见的代码,其实都应用了依赖注入的思想,我们来看几个例子:

  1. 使用 props 允许依赖注入
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function welcome(props) {
  return <h1> Hello, {props.name}</h1>;
}

welcome 组件通过接收 props 然后生成 html,别惊讶,我们最常用的 props 其实就是应用了依赖注入的思想。

  1. 使用 context 是实现依赖注入的另一种方法
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function counter() {
  const { message } = useContext(MessageContext);
  return <p>{ message }</p>;
}

由于 context 是沿着组件树向下传递的,我们可以使用组件内部的 hooks 来提取到它。

  1. 只使用 jsx 也能实现依赖注入
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 不允许开发者扩展组件的构造函数。我们通过一个例子来看看如何解决这个问题:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 是可被注入的。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { injectable } from "inversify";

export interface IProvider<T> {
  provide(): T;
}

@injectable()
export class NameProvider implements IProvider<string> {
  provide() {
    return "World";
  }
}

在组件中,我们可以直接调用注入的 provide 方法,而组件内部不用关心它的实现。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 的使用示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Provider } from 'inversify-react';
...

<Provider container={myContainer}>
    ...
</Provider>

然后我们就能在子组件中使用依赖了:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 {
    @resolve
    private readonly foo: Foo;
    ...
}

react-inversify

虽然和上一个库名字很像,但是两个库的做法是不一样的,这种方法更接近于 React 的思想,因为对象是作为属性传递的,而不是在组件内部实例化。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 objects

ReactDOM.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 RouterRedux。此外,React 还直接支持依赖注入。

但是,对于一些高级的用法,我们需要类似 InversifyJS 之类的库,选择一个适合你的库吧!希望本文能帮到你。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-07-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 code秘密花园 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
POJ-1456 Supermarket(贪心,并查集优化)
Supermarket Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 10725 Accepted: 4688 Description A supermarket has a set Prod of products on sale. It earns a profit px for each product x∈Prod sold by a deadline dx that is measured
ShenduCC
2018/04/25
7740
经典算法之贪心算法
  贪心算法,又称贪婪算法(Greedy Algorithm),是指在对问题求解时,总是做出在当前看来是最好的选择。也就是说,不从整体最优解出发来考虑,它所做出的仅是在某种意义上的局部最优解。  
用户3467126
2019/11/08
1.7K0
前端也能学算法:由浅入深讲解贪心算法
贪心算法是一种很常见的算法思想,而且很好理解,因为它符合人们一般的思维习惯。下面我们由浅入深的来讲讲贪心算法。
蒋鹏飞
2020/10/15
5060
前端也能学算法:由浅入深讲解贪心算法
【前端算法】买卖股票的最佳时机含手续费—— 贪心算法、动态规划实现
给定一个整数数组 prices,其中第 i 个元素代表了第 i 天的股票价格 ;整数 fee 代表了交易股票的手续费用。
徐小夕
2022/02/09
3340
贪心算法思想与练习
给定一个长度为 N 的数组,数组中的第 i 个数字表示一个给定股票在第 i 天的价格。
timerring
2023/03/24
6180
贪心算法思想与练习
零基础学贪心算法
本文在写作过程中参考了大量资料,不能一一列举,还请见谅。 贪心算法的定义: 贪心算法是指在对问题求解时,总是做出在当前看来是最好的选择。也就是说,不从整体最优上加以考虑,只做出在某种意义上的局部最优解。贪心算法不是对所有问题都能得到整体最优解,关键是贪心策略的选择,选择的贪心策略必须具备无后效性,即某个状态以前的过程不会影响以后的状态,只与当前状态有关。 解题的一般步骤是: 1.建立数学模型来描述问题; 2.把求解的问题分成若干个子问题; 3.对每一子问题求解,得到子问题的局部最优解; 4.把子问题的局部最
Angel_Kitty
2018/04/08
1K0
零基础学贪心算法
贪心算法
贪心算法:分阶段的工作,在每个阶段做出当前最好的选择,从而希望得到结果是最好或最优的算法。
_春华秋实
2019/02/22
5430
3.1 金融市场和期货
一个本来是对冲的交易可能实际成了投机行为,这是操作风险。 所以使用衍生品时,需要设定好风险的限额。
rocket
2018/09/14
6.5K1
3.1 金融市场和期货
贪心算法:买卖股票的最佳时机II
题目链接:https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock-ii/
代码随想录
2020/12/14
4390
贪心算法:买卖股票的最佳时机II
python买卖股票的最佳时机--贪心/
     设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易(多次买卖一支股票)。
py3study
2020/01/17
1.1K0
八十二、Python | Leetcode贪心算法系列
作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件。导致翘课严重,专业排名中下。.在大学60%的时间,都在CSDN。决定今天比昨天要更加努力。前面文章,点击下面链接
润森
2020/07/10
9930
贪心算法总结贪心算法基本思路算法实现实例分析参考
贪心算法 贪心算法(又称贪婪算法)是指,在对问题求解时,总是做出在当前看来是最好的选择。也就是说,不从整体最优上加以考虑,他所做出的是在某种意义上的局部最优解。 贪心算法不是对所有问题都能得到整体最优解,关键是贪心策略的选择,选择的贪心策略必须具备无后效性,即某个状态以前的过程不会影响以后的状态,只与当前状态有关。 基本思路 建立数学模型来描述问题; 把求解的问题分成若干个子问题; 对每一子问题求解,得到子问题的局部最优解; 把子问题的解局部最优解合成原来解问题的一个解。 算法实现 从问题的某个初始解出发
致Great
2018/04/11
11.9K0
贪心算法总结贪心算法基本思路算法实现实例分析参考
开源软件的商业模式
Business models for open-source software / 开源软件的商业模式
开源社
2022/04/11
2.2K0
大数据实战|怎样实现大型电商热销榜?
上次给粉丝的福利,购买极客时间课程,浪尖这里返现:球友24元,非球友10元或者8折入球。大家还记得吗,发现很多粉丝比较滞后,这两天还陆续找我要返现,,,今天看了一下,极客时间优惠还剩两天吧,过了这两天就真没返现了,找我,我也不能贴补你,,,活动详情可以阅读下文。扫文末二维码购买然后联系浪尖。
Spark学习技巧
2019/05/14
1.1K0
大数据实战|怎样实现大型电商热销榜?
【代码随想录】二刷-贪心算法
贪心算法 什么是贪心? 贪心的本质是选择每一阶段的局部最优,从而达到全局最优。 贪心没有规定的套路。 刷题或面试的时候,手动模拟一下感觉可以局部最优退出整体最优,而且想不到反例,那么就试一试贪心。 贪心算法一般分为如下四步: 将问题分为若干子问题 找出合适的贪心策略 求解每一个子问题的最优解 将局部最优解堆叠成全局最优解 ---- 455. 分发饼干 方法1: 充分利用每个饼干的大小,用大块的饼干优先喂饱大胃口的孩子 class Solution { public:
半生瓜的blog
2023/05/13
4280
【代码随想录】二刷-贪心算法
ACM之贪心算法
所谓贪心算法是指,在对问题求解时,总是做出在当前看来是最优解。也就是说,不 从整体最优上加以考虑,它所做出的仅仅是在某种意义上的局部最优解。 贪心算法没有固定的算法框架,算法设计的关键是贪心策略的选择。必须注意的是, 贪心算法不是对所有问题都能得到整体最优解,选择的贪心策略必须具备无后效性 (即某个状态以后的过程不会影响以前的状态,只与当前状态有关。) 所以,对所采用的贪心策略一定要仔细分析其是否满足无后效性。
Tanger
2021/06/16
7591
在线杂货店必须现代化数字平台才能蓬勃发展
一个是COVID之前时代传统杂货市场的领域,当时大多数消费者都在杂货店购物。另一个市场是当今的购物者,网上购物者蜂拥而至,而不是实体购物。随着客户选择与社会保持距离,他们现在越来越多地利用在线杂货平台进行送货或路边取货。
用户8078865
2020/12/25
4480
LeetCode数据库题目集合
编写一个 SQL 查询,满足条件:无论 person 是否有地址信息,都需要基于上述两表提供 person 的以下信息:
MiChong
2021/02/24
9390
LeetCode数据库题目集合
国庆手撸商品管理系统(三)
之前的内容 点我管理系统(一) 点我管理系统(二) 一.实现的内容 商品退货 商品库存 商品进货 商品删除 商品还原 时钟 优化模型 二.后续内容准备优化内容 把数据库查询的内容存在缓存中 增加按日期,按商品名查询 增加快捷商品增加 优化代码 优化界面 三.目录结构 drf_test |___drf_api | |___admin.py | |___apps.py | |___migrations | |___models.py | |
小小咸鱼YwY
2020/06/19
8840
平台之路
几年前,马克•贝尼奥夫(Marc Benioff)告诉我,他对开发后台办公应用程序不感兴趣,因为后者会在ERP和金融市场上与SAP和甲骨文(Oracle)竞争。很多人,包括我自己,都对这个想法表示怀疑
甜甜圈
2020/12/04
6040
相关推荐
POJ-1456 Supermarket(贪心,并查集优化)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文