在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組件也很好