Question

说我有一个JS文件，其中包含2个React Component类定义和许多其他内容：

// 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
}

问题

“ a”的声明和值设置代码何时运行？该文件是否在其他文件导入/需要时运行？
我可以在此文件中有一些标志并不时更改，然后从许多其他文件中读取此标志的值吗？（例如单例管理器？）如果可以，如何导出并导入它？
创建多个文件实际上意味着什么？（除了将大量代码分成小块以提高可读性之外），它还有其他区别吗？

Answer 1

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

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

问题2：我可以在此文件中添加一些标志并不时进行更改，然后再从许多其他文件中读取该标志的值吗？（例如单例管理员？）如果可以，如何导出和导入它？

可以。

导出：

export let a = 0;

导入：

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

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

将代码分成小块；
允许重复使用；和
启用非导出变量/函数的封装。

-

检查模块使用情况的演示：http://plnkr.co/edit/0ImgQj2KzLj9O1D63Gq9?p=preview

请注意，即使a.js和b.js都导入了c.js，它也仅被加载一次。还可以查看如何导出和导入它，以及如何进行更改，在其他模块中进行更改。

Answer 2

好吧，这是

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

答案2：您可以定义一些变量并将其导出以在其他文件中使用，但是我们要做的是不会随时间变化的常量值，例如您的动作类型等，此处所指的不是它的用途是什么，您想为此使用react Context或Redux存储。

答案3：创建多个文件是一种模块化的编码方法，React强调对Composition的重视，这是将组件相互组合并构建App的全部要点

Answer 3

是的。导入文件后，此代码将立即运行。它与react无关，但与js的工作方式无关。
您可以使用export关键字在js中共享变量，如下所示： export let a = 0 对该变量所做的更改不会重新呈现您的组件，因为它不属于任何状态。
可读性本身就是巨大的影响。它还允许重用变量名称。在进行协作时，它使流程变得更加容易，并将冲突减少到实际存在的地方。

JS文件中React Component类之外的代码什么时候运行？

3 个答案: