React 源码中的依赖注入方法

Qter

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. }  

复制代码

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