如何在React中实现服务（AngularJS中的概念）类组件

Question

所有

我对AngularJS的React很新。在AngularJS中，存在服务依赖注入，其可以提供服务实例来执行除UI操作之外的数据获取，处理等。我想知道如何在React组件中执行此操作（或实现该注入）？

由于

Answer 1

我更喜欢在另一个通过module.exports公开'public'函数的文件中创建一个服务。

e.g。

module.exports = {
  foo: function(){ return bar; }
}

然后由Components使用

引用

import myService from './routetoservice/myService'

Answer 2

Michael Dunn's答案的扩展

这是实际答案，

• 服务模式不限于任何编程语言或 图书馆。

• 我们可以用任何语言实现这个概念，即使我们可以 在反应

中实现这一点

• 可以在Javascript中的服务器或ui浏览器中创建一个小服务，用于某些逻辑目的

• 它为我们带来了代码可用性，代码管理，特定逻辑代码隔离的好处

• 它是一种非常原生的代码可用性，代码管理，特定逻辑代码隔离方式

• 如果我们比较redux / flux与服务，redux / flux也可以满足这些目的

• 目前我正在使用redux及其操作，并在需要时在ui上创建了我的小服务。

• 无需使用其他NPM模块来创建服务，只需Michael Dunn's解决方案就足够了

Answer 3

在reactjs中，我们使用flux模式来提供数据处理。这是一个回流的例子。 React with Flux: is this the dogmatic pattern or are there equal/better options?

Answer 4

React似乎在哲学上反对Angular意义上的服务，显然更喜欢UI和逻辑的紧密耦合。

但是我找到了一个react-services模块，它似乎提供了你所追求的目标：

  

•通过引入一个服务层来分离您的组件和应用程序状态，该服务层负责通过您的应用程序传播更改

     

•以明确，可测试的方式管理组件依赖

     

•没有事件，也没有生命周期管理 - 一切都是自动完成的

     

•它很小且易于理解 - 核心不到100行代码

Answer 5

https://medium.com/@alshdavid/react-state-and-services-edb95be48851

这是一篇文章，展示了如何使用React Context和rxjs做到这一点