时间戳

首页 > 解决方案 > React中控制反转的困惑

reactjs - React中控制反转的困惑

问题描述

我在学习 React 时遇到了一个叫做“控制反转”的东西。然后，在这里做了一些研究https://dev.to/lowweisz/use-the-inversion-of-control-pattern-with-react-4k72我还是觉得这个词有点令人困惑，也就是说，是不是真的所有控制反转意味着不是在一个组件中添加两个以上的道具，而是最好创建额外的自定义组件来处理一个额外的道具逻辑？控制反转有点建议不要将大量道具放入单个组件中，以免使该组件复杂化。真的吗？我只需要你的澄清

标签： reactjs

解决方案

首先，您需要熟悉Inversion of Control。这是一个与几乎所有现代编程语言/范式相关的一般概念。这不是“反应”的事情。

控制反转是软件设计中的一种模式或概念，特别是（但不是唯一的）面向对象软件，它有助于保持松散耦合等。

实现它的方法之一是通过依赖注入。

这个从数据库获取数据并显示它的伪代码的小例子：

class SomeScreenRenderer {

   constructor() {
       this.dbQuery = new MyDatabaseClass();
   }
   
   const showDataOnScreen = () => {
       Screen.show(this.dbQuery.getMyData());
   }
   
}

相对：

class SomeScreenRendererWithDependencyInjection {

   constructor(dbHandlerInjected) {
       this.dbQuery = dbHandlerInjected
   }
   
   const showDataOnScreen = () => {
       Screen.show(this.dbQuery.getMyData());
   }
   
}

简单来说，后面的类使用依赖注入模式来获取它需要的某个数据库处理程序的实例，但是，不是创建它，因此与特定的实现耦合，而是将实例注入其中。这种模式使我们的系统可以自由地更改数据库，而无需更改客户端类。

您可以在伟大的Martin Fowler 文章中了解更多信息

现在，在 react 组件、props 等中，您可以应用这些概念以使组件独立和可交换。

例如，渲染道具技术允许您创建一个组件来获取数据并使用另一个它一无所知的组件渲染它，渲染器被注入其中。

推荐阅读