Question

在前端应用程序中，通常需要许多组件访问数据。路由是一个例子，另一个是配置数据，例如，功能开关，默认语言等

在没有使用任何特定框架的应用程序中，我可以使用

跨模块共享此配置数据

export class Configuration {

  static getConfig () {
    // get the config from the server
    return axios.get('/config').then(function (response) {
      return response;
    })
  }
}

然后将此类导入到需要访问配置数据的任何模块中。对于一些前端框架，很明显如何共享这样的“全局”数据，例如

AngularJS - Configuration应定义为依赖注入任何需要访问配置的控制器/指令/服务的服务。数据
Vue.js - 使用mixin

但是，使用ReactJS时，应该使用哪种方法并不明显。可能的选择是：

一个普通的JavaScript模块。封装要作为函数/方法共享的数据，并将其导入需要访问它的任何React组件。这似乎是最简单的方法，但我觉得在编写ReactJS应用程序时，所有内容都应该定义为组件，而不是JavaScript类/函数。
Redux 似乎是大型应用中共享状态的推荐方法，但对于较小的项目来说这感觉有点过分
还有什么？

Answer 1

但我觉得在编写ReactJS应用程序时一切都是如此应该被定义为一个组件，而不是JavaScript 类/功能。

我真的没有看到为什么一切都应该成为React中的一个组件的原因。如果它只是数据，您可以创建该JS对象的单个实例并在任何需要的地方导入。

我在我的应用程序中使用了类似的东西，我有一个＆＃34;全球＆＃34;一种保存不同配置等的对象，然后我在需要该数据的组件中使用它。

Here也是关于React中组件通信的更多信息。

Answer 2

一个普通的JavaScript模块。封装要作为函数/方法共享的数据，并将其导入需要的任何React组件   访问它。这似乎是最简单的方法，但我有   感觉在编写ReactJS应用程序时应该定义一切   作为一个组件，而不是JavaScript类/函数。

我不同意，React是一个有助于通过组件创建用户界面的库，但这并不意味着（服务，翻译，配置数据）必须构建到组件中，另一方面，它实际上不鼓励你不应该将您的服务/配置耦合到库中你应该将React的范围限制为它的用途。因此，使用普通的JavaScript模块感觉是实现简单反应应用程序的正确方法。

Redux似乎是大型共享状态的推荐方法   应用程序，但这对于较小的项目来说感觉有点过分

我认为这取决于应用程序的复杂程度而不是大小，这是您应该考虑的地方，您的应用程序将如何发展，或者redux不是您真正需要删除所有这些数据React中的共享依赖。

别的什么？

反应背景（discourage）
可观察的模式

https://www.npmjs.com/package/react-observable-subscribe

Answer 3

我认为你应该选择redux解决方案。这听起来像是一个过度杀戮，但它具有global state object的额外优势，因此当数据在组件之间共享时，您可以轻松选择何时重新呈现应用程序。

Answer 4

你可以在反应中使用上下文： https://reactjs.org/docs/context.html

或者你也可以在window对象中创建一个全局变量

另一种方法是使用观察者设计模式plagin并使用它。

除了redux之外，

mobX或其他stateManagement组件也是好的

在React组件之间共享数据

4 个答案: