firemail

标题: React 源码中的依赖注入方法 [打印本页]
作者: Qter    时间: 2020-10-16 16:44
标题: React 源码中的依赖注入方法
https://www.geek-share.com/detail/2752558290.html

一、前言

依赖注入（Dependency Injection）这个概念的兴起已经有很长时间了，把这个概念融入到框架中达到出神入化境地的，非Spring莫属。然而在前端领域，似乎很少会提到这个概念，难道前端的代码就不需要解耦吗？前端的代码就没有依赖了？本文将以 React 的源码为例子，看看它是如何使用依赖注入这一设计模式的。

二、依赖注入的基本概念

在看代码之前，有必要先简单介绍一下依赖注入的基本概念。依赖注入和控制反转（Inversion of Control），这两个词经常一起出现。一句话表述他们之间的关系：依赖注入是控制反转的一种实现方式。另一种方式叫依赖查找（Dependency Lookup）。

在控制不反转的情况下，某个类如果依赖另一个类，它会自己来创建依赖：

  1. class Person {  
  2. eat() {  
  3. const dinner = new Dinner('法国菜');  
  4. console.log('开饭啦！，今晚自己做：', dinner.name);  
  5. }  
  6. }  
  7.   
  8. class Dinner {  
  9. constructor(name) {  
  10. this.name = name;  
  11. }  
  12. }  
复制代码

假设一个人要吃饭，如果控制不反转，就需要自己来做，像上面的代码一样要自己new Dinner。

如果使用控制反转，吃什么就不用自己费脑子了，别人给我做好放到我面前，我直接吃就好！

  1. class Person {  
  2. eat(dinner) {  
  3. console.log('开饭啦！，今晚有大厨给我做：', dinner.name);  
  4. }  
复制代码

也就是说，不需要自己来创建依赖的对象了，由外部传入，这就是依赖注入！






欢迎光临 firemail (http://firemail.wang:8088/) Powered by Discuz! X3