reactjs - React 中的全局变量

Question

我知道 Redux 可以解决这个问题，但我想到了一个想法。

假设我有一个应用程序在启动时会获取一些 JSON。我将根据此 JSON 设置环境，因此我们假设应用程序启动并下载一组列表项。

当然，由于我没有使用 Redux(应用程序本身非常简单，Redux 在这里感觉像是一个巨大的杀伤力)，如果我想在我的组件之外使用这些列表项，我必须将它们作为 props 传递下来，然后再次将它们作为 props 传递到我想要使用的深度。

为什么我不能做这样的事情:

fetch(listItems)
  .then(response => response.json())
  .then(json => {
    window.consts = json.list;

这样我就可以在应用程序中的任何位置甚至在 React 之外访问我的列表。它被认为是反模式吗？当然，列表项永远不会更改，因此没有交互或状态更改。

Answer 1

当我有一些静态(但通过 API 请求)数据时，我通常会做一个小服务，其行为类似于全局，但在常规导入下:

// get-timezones.js
import { get } from '../services/request'

let fetching = false
let timez = null
export default () => {
  // if we already got timezones, return it
  if (timez) {
    return new Promise((resolve) => resolve(timez))
  }

  // if we already fired a request, return its promise
  if (fetching) {
    return fetching
  }

  // first run, return request promise
  // and populate timezones for caching
  fetching = get('timezones').then((data) => {
    timez = data
    return timez
  })
  return fetching
}

然后在 View react组件中:

// some-view.js
getTimezones().then((timezones) => {
  this.setState({ timezones })
})

它的工作方式总是返回一个 promise ，但第一次调用它时，它将向 API 发出请求并获取数据。后续请求将使用缓存变量(有点像全局变量)。

您的方法可能存在一些问题:

• 如果在填充此 window.consts 之前进行 React 渲染，您将不会能够访问它，react 不会知道它应该重新渲染。
• 即使数据不会被使用，您似乎也在执行此请求。

我的方法的唯一缺点是异步设置状态，如果不再安装组件，可能会导致错误。