Create React App 使用全局变量

在 React 应用中，我们有时候需要在不同组件之间共享数据。一种常见的做法是使用全局变量来存储这些数据，然后在需要的组件中读取或修改这些数据。

创建全局变量

在 Create React App 中，我们可以使用 window 对象来创建全局变量。在 src 目录下新建一个 globals.js 文件，然后在文件中定义全局变量：

window.appSettings = {
  appName: 'My App',
  apiUrl: 'https://api.example.com'
};

在组件中访问全局变量

要在组件中访问全局变量，我们可以直接通过 window 对象来获取：

console.log(window.appSettings.appName); // 输出 'My App'
console.log(window.appSettings.apiUrl); // 输出 'https://api.example.com'

修改全局变量

如果需要修改全局变量的值，我们也可以直接对其进行赋值操作：

window.appSettings.appName = 'New App Name';
console.log(window.appSettings.appName); // 输出 'New App Name'

注意事项

使用全局变量虽然方便，但也存在一些潜在的问题。首先，全局变量可能会被意外地修改，导致程序出现 bug。其次，全局变量的作用域是整个应用，可能会影响到其他模块的正常运行。

因此，在使用全局变量时，建议谨慎考虑是否真的需要使用全局变量，可以考虑使用 React 的 Context 或 Redux 等状态管理工具来代替全局变量。