跨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 -使用混合器

然而，在使用ReactJS时，不清楚应该使用哪种方法。可能的备选办法是：

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

Answer 1

但我觉得在编写ReactJS应用程序时，一切都应该定义为组件，而不是JavaScript类/函数。

我真的看不出为什么每件事都应该是反应的一个组成部分。如果它只是数据，您可以创建JS对象的单个实例，并在需要它的任何地方导入它。

我在我的应用程序中使用了类似的东西，其中我有一个“全局”对象，可以保存不同的信任等等，然后我将它用于需要这些数据的组件中。

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

Answer 2

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

我不同意，React是一个通过组件帮助创建用户界面的库，但这并不意味着(服务、翻译、配置数据)必须内置到组件中，另一方面，它实际上是不鼓励的--您不应该将您的服务/配置耦合到一个库中--您应该限制对它的使用的反应范围。因此，使用简单的旧JavaScript模块是实现一个简单的react应用程序的正确方法。

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

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

1. 还有别的吗？

react上下文(劝阻)

可观察模式

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

Answer 3

我认为你应该采用redux解决方案。这听起来像一个过火，但它有一个额外的优势，有一个global state object，因此，您可以很容易地选择什么时候重新呈现您的应用程序时，数据是共享的组合。