React Nativeをやってると暗黙の了解として、import/exportが使われてる。
requireで書いてたみたいだけど、その歴史を知らないのでrequireは気にしないでimport/exportを理解する。
下記のようにlib.jsとmain.jsがあった場合、importするファイルのlib.js内でfunctionをexportしておくと
import {} fromでそれを個々に呼ぶことができる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//------ lib.js ------ export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } const foo = Math.PI + Math.SQRT2; export { foo }; //------ main.js ------ import { square, diag, foo } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5 |
またアスタリスクを使用することで、オブジェクトを参照してexportした関数が呼べる。
|
1 2 3 4 5 |
//------ main.js ------ import * as lib from 'lib'; console.log(lib.square(11)); // 121 console.log(lib.diag(4, 3)); // 5 |
default
よくわからないのがexport default。
セミコロンなしで呼ぶことで関数・クラスをそのまま呼べる。
読む込むファイルごとに 1 つだけ呼ぶことができる。
|
1 2 3 4 5 6 7 |
//------ myFunc.js ------ export default function () { ··· } // no semicolon! //------ main1.js ------ import myFunc from 'myFunc'; myFunc(); |
|
1 2 3 4 5 6 7 |
//------ MyClass.js ------ export default class { ··· } // no semicolon! //------ main2.js ------ import MyClass from 'MyClass'; const inst = new MyClass(); |
defaultは一つだけというのがポイントですね。