在React组件之间共享数据

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时，不清楚应该使用哪种方法。 可能的选项是：

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

2. Redux似乎是推荐在大型应用程序中共享状态的方法，但是对于较小的项目来说，这似乎有些过头了

3. 还有吗

Answer 1

但是我有一种感觉，当编写ReactJS应用程序时，所有内容都应定义为组件，而不是JavaScript类/函数。

我真的没有看到为什么所有内容都应该成为React组件的原因。 如果只是数据，则可以创建该JS对象的单个实例，并将其导入所需的任何位置。

我在我的应用程序中使用了类似的东西，其中有一个“全局”对象，该对象正在保存不同的配置等，然后在需要该数据的组件中使用它。

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

Answer 2

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

我不同意，React是一个可通过组件帮助创建用户界面的库，但这并不意味着（服务，翻译，配置数据）必须内置在组件中，另一方面，它实际上是劝阻您不应该使用将您的服务/配置存储到库中时，应将React的范围限制为它的用途。 因此，使用普通的JavaScript模块是实现简单的React应用的正确方法。

2. Redux似乎是推荐在大型应用程序中共享状态的方法，但是对于较小的项目来说，这似乎有些过头了

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

3. 还有吗

反应上下文（ 不鼓励 ）
可观察的模式

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

Answer 3

我认为您应该使用redux解决方案。 这听起来像是一发不可收拾，但它具有拥有global state object优点，因此，当在组件之间共享数据时，您可以轻松选择何时重新呈现应用程序。

Answer 4

您可以在react中使用上下文： https : //reactjs.org/docs/context.html

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

另一种方法是使用观察者设计模式的纯文本并使用它。

除了redux以外，mobX或其他stateManagement组件也很好