When does the code outside React Component class in a JS file run?

Question

Say I have a JS file contains 2 React Component class definition and a bunch of other things:

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

Questions

1. When will the declaration and value setting code for 'a' run? Does it run when this file is imported/required by other files?

2. Can I have some flag in this file and changes from time to time, and then read the value of this flag from many other files? (like a singleton manager?) If I can, how do I export it and import it?

3. What does creating multiple files actually mean? (except that it breaks huge chunk of code into small chunks for better readability) Does it make any other difference?

Answer 1

Question 1: When will the declaration and value setting code for 'a' run? Does it run when this file is imported/required by other files?

Runs the first time the file is imported. It is not executed on subsequential imports.

Question 2: Can I have some flag in this file and changes from time to time, and then read the value of this flag from many other files? (like a singleton manager?) If I can, how do I export it and import it?

You can.

Exporting:

export let a = 0;

Importing:

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

Question 3: What does creating multiple files actually mean? (except that it breaks huge chunk of code into small chunks for better readability) Does it make any other difference?

• Breaks code into small chunks;
• Allows reuse; and
• Enables encapsulation of non-exported variables/functions.

--

Check a demo of modules usage: http://plnkr.co/edit/0ImgQj2KzLj9O1D63Gq9?p=preview

注意 howa.js只加载一次，即使它是由b.js和导入的c.js。还可以查看它是如何导出和导入的，以及在它发生变化时如何在其他模块中获取更改。