Javascript JS文件中React组件类之外的代码何时运行？

假设我有一个JS文件包含2个React组件类定义和一系列其他内容：

// a file called OuterComponent.react.js

import xxx from xxx;
import yyy from yyy;

// When does these run?
let a = 0;
a = 1;

export default class OuterComponent extends React.PureComponent<> {
  render() {
    return (
      <View>
       <InnerComponent />
      </View>
    );
  }
}

class InnerComponent extends React.PureComponent<> {
  //... something
}

//名为OuterComponent.react.js的文件
从xxx进口xxx；
从yyy导入yyy；
//什么时候开始？
设a=0；
a=1；
导出默认类OuterComponent扩展React.PureComponent{
render（）{
返回(
);
}
}
类InnerComponent扩展了React.PureComponent{
//……什么
}

问题

“a”的声明和值设置代码何时运行？当其他文件导入/需要此文件时，它是否运行

我可以在这个文件中有一些标志并不时地进行更改，然后从许多其他文件中读取这个标志的值吗？（像一个单身经理人？）如果可以，我如何导出和导入它

创建多个文件实际上意味着什么？（除了为了更好的可读性，它将大块代码分成小块）它还有其他区别吗

问题1：“a”的声明和值设置代码何时运行？当其他文件导入/需要此文件时，它是否运行

第一次导入文件时运行。它不会在后续导入上执行

问题2：我可以在这个文件中有一些标志并不时更改，然后从许多其他文件中读取这个标志的值吗？（像一个单身经理人？）如果可以，我如何导出和导入它

你可以

出口：

export let a = 0;

进口：

import { a } from './filename.js';

问题3：创建多个文件实际上意味着什么？（除了为了更好的可读性，它将大块代码分成小块）它还有其他区别吗

• 把代码分成小块
• 允许重用；及
• 启用非导出变量/函数的封装

--

检查模块用法的演示：

请注意，

a.js

仅加载一次，即使它是通过

b.js

和

c.js

导入的。还可以查看它是如何导出和导入的，以及当它发生更改时，如何在其他模块中拾取更改。

好的，在这里

回答1：是的，它在导入此文件时运行

回答2：您可以定义一些变量并将其导出到其他文件中使用，但我们对不随时间变化的常量值执行此操作，如操作类型等，您在这里所指的不是它的用途，您希望使用react Context或Redux store进行此操作

回答3：创建多个文件是一种模块化的编码方法，强调组合，这是在另一个组件中组合组件的全部要点，并构建一个应用程序

对。导入文件时，此代码将立即运行。它与react无关，而是与js的工作方式有关

您可以使用

export

关键字在js中共享一个变量，如下所示：

export let a=0

对此变量的更改不会重新加载组件，因为它不是任何状态的一部分

可读性本身具有巨大的影响。它还允许重用变量名。 在协作中工作时，它会使流程更加容易，并将冲突减少到真正发生冲突的地方

---

对于问题3，这是否意味着，对于JS，每个文件都像其他语言一样是一个“名称空间”或“包”？是的，有点像。不是真正的名称空间，因为在某些语言中名称空间/包充当前缀。它更像是封装，真的。未导出的内容保证无法从外部访问。类似地，如果您想在模块内使用某些内容，则必须导入它（或使用全局变量，这取决于环境--浏览器、节点等）。啊，考虑到每个模块都有一组标识符，因此可以将其视为名称空间，这意味着模块

a.js

中声明的一个标识符

a

不会与模块

b.js

中声明的标识符

a

冲突。（即使

a.js

导出其

a

，您也可以在

b.js

中使用不同的名称导入它，而不是

a

）是的，它会运行，否则模块加载器将不知道该文件实际导出了该组件。关于从

b.js

更改

a.stuff

，您确实不能，因为导入会在导入程序的作用域中创建常量标识符。如果您试图更改它，您应该会得到一个错误（只是不知道这个错误是否在所有浏览器和节点中都是标准化的）。