CODEWITHSUNDEEP
javascriptreactjsreact-native
Hua
Hua

Reputation: 143

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

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?

Upvotes: 4

Views: 2196

Answers (3)

ibtsam
ibtsam

Reputation: 1710

okay here it is

Answer 1: Yes, it runs when you import this file.

Answer 2: You can define some varible and export it to use in some other file, but that we do for constant values that does not change over time, like your action types etc, the thing you are referring to here is not what it is for, you want to use react Context or Redux store for that.

Answer 3: Creating multiple files is a modular approach to code, React emphasis on Composition that is the whole point of composing components in one another and build an App

Upvotes: 2

Neta
Neta

Reputation: 11

  1. Yes. This code will run immediately when the file is imported. It has nothing to do with react but with how js works.

  2. You can share a variable in js using export keyword like this: export let a = 0 Changes to this variable won't rerender your components because it's not part of any state.

  3. Readability is huge impact by itself. It also allows reuse of variables names. When working in collaboration it makes the flow much easier and reduces conflicts to only the places where they really are.

Upvotes: 1

acdcjunior
acdcjunior

Reputation: 135792

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

Notice how a.js is loaded only once, even though it is imported both by b.js and c.js. Also see how it is exported and imported, and how when it changes, the change is picked up in other modules.

Upvotes: 6

Related Questions