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

Question

将模块添加到全局＆＃39;是否成本高昂？反应？我希望在需要时可以使用模块，而不必依赖于将其导入每个文件。

我将以下内容添加到＆＃39; index.jsx＆＃39;文件：

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

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

Answer 1

昂贵的，你可能意味着，它是否会增加整个文件大小或内存使用量？不，它没有，除非，例如，您使用代码拆分，并且不将您的公共或供应商包提取到单独的文件中。

最佳做法是尝试而不是填充全球范围，主要有两个原因：

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

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

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

发出网络请求的库（如axios）通常放在服务模块或API util中，而不是放在每个模块中。但是，如果axios真的是您的应用程序不可或缺的部分，并且您在很多地方导入它，则可以使用类似ProvidePlugin的内容（如果您使用的是webpack）。

  

<强> ProvidePlugin

     

自动加载模块，而不是到处都是import或require。