在反应组件之外定义的变量是否被视为全局变量？答案

【问题标题】：Are variables defined outside of a react component considered global?在反应组件之外定义的变量是否被视为全局变量？
【发布时间】：2020-04-02 20:14:42
【问题描述】：

我知道使用全局变量是一种不好的做法。我也知道在函数之外定义的javascript变量被认为是全局的。对于在反应组件之外定义的变量也是如此，无论是功能组件还是类。它似乎没有，因为 js 库中的某些 css 使用这样的语法，但我不明白为什么它不会是全局的。例如：

import ...

const styles = ...

const MyComponent = () => {
   ...
}

export default MyComponent

这里的样式是全局变量吗？为什么或为什么不？

【问题讨论】：

阅读有关模块的更多信息，但简而言之，您定义了常量styles，之后您不会导出它。所以除了这个模块，你将无法在其他任何地方使用它。
@AntoanElenkov 谢谢。这也适用于测试文件吗？例如，在开玩笑的情况下，您没有导出任何内容，因此 component.test.js 文件也是一个模块，或者在任何描述块或任何功能块之外定义的变量（例如在文件顶部）是否被视为全局变量？
@Isdmt，您的测试函数不会被导出，因为当测试引擎执行它们时，您不会在此文件中的任何其他地方使用它们。如果你在函数之外定义变量，它只会在这个文件中可见，而且它不是全局的，也没有这样的东西。如果你想使用全局变量，你可以定义并导出一个全局对象，你所有的全局数据都可以在其中赋值。但同样，您应该在任何您想使用它的地方导入这个全局对象。如果不够清楚，我可以用例子写一个答案，如果你想让我这样做，请告诉我。

【解决方案1】：

在 React 中，与许多现代 Javascript 框架一样，它们使用脚本模块，将每个脚本沙箱化。这意味着您无法定义全局，除非您专门为 window 对象分配某些内容。

const local = {};
window.global = {};

脚本模块是通过将脚本标签的类型设置为module来定义的：

<script type="module" src="myscript.js"></script>

您应该会看到 react 创建的 HTML 包含这些脚本类型。

【讨论】：

感谢您的回答。我在上面的评论中问过这个问题，但也想在这个答案下问：这也适用于测试文件吗？例如，在开玩笑的情况下，您没有导出任何内容，因此 component.test.js 文件也是一个模块，或者在任何描述块或任何功能块之外定义的变量（例如在文件顶部）是否被视为全局变量？