当我向全局 React 对象添加模块时会发生什么？

Question

在 React 中添加一个模块到“全局”会很昂贵吗？我希望有一个在需要时可用的模块，而不必依赖将其导入到每个文件中。

我将以下内容添加到“index.jsx”文件中：

import axios from 'axios';
global.axios = axios;

然后通过引用全局来使用axios。

Answer 1

您可能指的是昂贵，它是否会增加总体文件大小或内存使用量？不，它不会，除非，例如，您使用代码分割并且不将公共包或供应商包提取到单独的文件中。

最好的做法是尝试不要填充全局范围，主要有两个原因：

• 任何成员都可以访问全局范围并搞砸您在那里定义的内容。
• 如果在全局范围内放置太多东西，必然会出现名称冲突。

您的问题并非特定于 React 或 ES6。没有“全局反应对象”。在浏览器上下文中，全局范围是 window 对象；所以你会使用

window.axios = axios;

。在节点环境中，它将是

global.axios = axios;

。设置全局变量在某些情况下非常有用，例如在测试中。当设置测试在节点中运行时，通常在全局对象上设置断言方法。

导入 axios 时，会创建一个实例。在全局范围内放置对 axios 的引用不会带来任何好处，但会带来出现错误的可能性。另外，在我看来，在每个文件中定义依赖项/导入将有助于提高可读性和某些编辑器中的智能感知。

发出网络请求的库（例如 axios）通常放置在服务模块或 API 实用程序中，而不是放置在每个模块中。然而，如果 axios 确实是你的应用程序不可或缺的一部分，并且你在很多地方导入它，你可以使用像 ProvidePlugin 这样的东西（如果你使用的是 webpack）。

提供插件

自动加载模块，而不必在任何地方

import

或

require

它们。