javascript - 跨 React 组件共享数据

Question

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

在不使用任何特定框架的应用程序中，我可能会使用跨模块共享此配置数据

export class Configuration {

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

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

• AngularJS - Configuration 应该定义为依赖注入(inject)到任何需要访问配置的 Controller /指令/服务中的服务。数据
• Vue.js - 使用混合

然而，当使用 ReactJS 时，应该使用哪种方法并不明显。可能的选项是:

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

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

3. 还有别的吗？

Answer 1

but I have the feeling that when writing a ReactJS app everything should be defined as a component, rather than JavaScript classes/functions.

我真的不明白为什么一切都应该是 React 中的组件。如果它只是数据，您可以创建该 JS 对象的单个实例并将其导入到您需要的任何地方。

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

Here还有一些关于 React 中组件通信的更多信息。