React - 挂载全局变量

React 挂载全局变量相对灵活，不同于全局变量挂载 Vue 实例，它有多种方式。本文章针对类组件和函数组件写了两种全局变量的挂载方法，供参考。

React 挂载全局变量的使用场景

我们要尽量避免挂载全局变量，因为这会污染全局作用域。只有当我们遇到通常像 axios、antd、cookie 等很多组件都会使用到的变量时，才会考虑如何做到一次引入全局使用。

参考：React声明全局变量原理：挂载在 react 原型上实现全局使用。由于各类组件都会继承 React.Component，因此我们在 Component 原型上挂载变量，实现全局引用。

在 index.js 入口文件中如下操作；

import axios from 'axios';

//将axios挂载到原型中
React.Component.prototype.$axios = axios;

下面就可以通过this实现调用

this.$axios.get('xxxx')

同理，原型链上可以挂载任何你想挂载的东西。

为了更好的管理在全局声明和挂载的变量，我们单独创建一个 js 文件，存放一系列全局变量和方法，变量和方法同 js 一样，挂载在 window 对象上即可：

// global.js
window.a = 3;
window.b = () => {
  // do something...
}

使用时，将该公共 js 文件引入到项目的入口文件 (index.js) 中即可。global.js 文件加载到 index.js 后，相当于执行了内部的挂载操作，这样后续的 js 文件就都可以调用 window 对象上的自定义变量和方法了：

// index.js
import "./global.js";

// ......