javascript - 当我将模块添加到 Global React 对象时会发生什么？

Question

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

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

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

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

Answer 1

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

尝试不填充全局范围是最佳实践，主要有两个原因：

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

您的问题并非特定于 React 或 ES6。没有“全局反应对象”。在浏览器上下文中，全局范围是窗口对象；所以你会使用window.axios = axios;. 在节点环境中，它将是global.axios = axios;. 设置全局变量在某些情况下非常有用，例如在测试中。在设置测试以在节点中运行时，通常在全局对象上设置断言方法。

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

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

提供插件

import自动加载模块，而不必require到处加载。