使用 Injector 和 Provider 反应原生服务，例如 Angular答案

【问题标题】：React Native services like in Angular with Injector and Provider使用 Injector 和 Provider 反应原生服务，例如 Angular
【发布时间】：2018-06-02 22:05:39
【问题描述】：

嘿，我正在测试几个用于混合移动开发的框架。总而言之，比起 Angular，我更喜欢 React Native，但我非常喜欢 Injector 和 Provider 的机制。拥有一个类的单个实例可能非常有用，但目前我不知道如何使用 React Native 实现这一点。我曾想过使用 AsyncStorage，但我对此并不满意。关键问题：有没有办法在 React Native 的多个组件中使用同一个实例？

我想到了 Singleton，但不知道如何实现。

【问题讨论】：

标签： angular react-native service provider

【解决方案1】：

React 只是给你一个组件层。他们不提供依赖注入。您需要自己实现，而且很难实现，因为无论您在多少地方使用服务，Angular 都为服务提供单个实例。对于单例模式，您需要创建一个类，并要求该类为您提供一个服务实例。这堂课会注意的。如果您的服务中已经存在一个对象，那么它将返回现有对象，否则将创建一个新对象。

【讨论】：

我已经学习了 C# 编程。我还不了解有关 javascript 的所有基础知识。我不知道如何创建这个类，它注意到该实例已经存在。我认为，如果我创建一个可以处理实例的组件并将该组件导入到另外两个组件中，我将有两个组件分别处理这些实例。或者我可以创建一个带有静态变量的组件，这对于该组件的所有导入都是相同的？ PS：我希望我的英语不要太差:-)
只需创建一个类并使用静态变量作为您的服务实例。但这不是一个好的用例。我认为您应该创建一个静态方法和一个服务类型的静态变量。最初，此变量将保存一个空值。当您需要服务实例时，只需调用该方法即可。此方法将检查变量是否为空，然后它将创建一个对象，否则将返回现有对象。希望它会有所帮助

【解决方案2】：

您可以使用mobx。

请参见此处的示例： https://github.com/PrioritySoftware/priority-master-react/.

我所做的是在 src/providers/index.ts 中定义我的提供程序，然后使用 Mobx 将实例传递给组件。

看看这两个文件：

1) src/app.tsx.

2)src/pages/main.page.tsx.

注入本身：https://github.com/PrioritySoftware/priority-master-react/blob/master/src/pages/main.page.tsx#L29。

我实际上是从 Angular 开始的，然后开始了解 React :)

【讨论】：