2017-09-12 8 views
1

私は単純なReactライブラリで作業していますが、複数のオブジェクトが不必要に作成されているかどうかはわかりません。私が使用して(私は図書館を利用して)私のリアクトプロジェクトのindex.js複数のオブジェクトが作成されていますか?

import app from './app.js'; 
... 
export default app; 

class App { 
    method1() { 

    } 
    method2() { 

    } 
} 
export default new App(); 

は私もindex.jsファイルを持っている:

私は app.jsファイルを持っています:

import MyLibrary from 'react-library'; 
... 
MyLibrary.method1(); 

そして、私はいくつかの私のcomあまりにもponents:

import MyLibrary from 'react-library'; 
... 
MyLibrary.method2(); 

最初MyLibraryに異なるオブジェクトMyLibraryの第二の輸入ですか?

+0

私の理解では、はい。ポイントは、すべてのモジュールは独自のスコープを持つ必要があります。したがって、ファイル内のモジュールのインポートは、そのスコープ内でのみアクセス可能でなければなりません。だから、彼らは別のオブジェクトです。 – Rajesh

+0

これをテストしようとしましたが、結果は同じオブジェクトを示唆していますか?私は 'method1'のダミープロパティに値を渡します。 2回目のインポート後に 'MyLibrary'をログすると、そのプロパティが存在します。 – tommyd456

+0

それは '新しいApp()'のためです。モジュールがインスタンスをエクスポートしています。インポートするたびに、参照をインポートしています。更新すると、そのメモリ位置のオブジェクトが更新されます。クラスを返し、すべてのファイルにオブジェクトを作成しようとします。 – Rajesh

答えて

2

MyLibraryの2番目のインポートは、最初の MyLibraryとは異なるオブジェクトですか? importによって返されたオブジェクトがキャッシュされている一般的

(同じ挙動requireをnodejsとして)、同じファイルの倍数のインポートが返される同じオブジェクトになります。あなたの質問への答えはいいえ、あなたはメモリ内の同じ参照を扱っています。

https://webpack.github.io/docs/resolving.html

同じリソースへの複数のパラレルまたはシリアル 要求がマージされるように、すべてのファイルシステムへのアクセスがキャッシュされます。

あなたの特定のケースでは

、コメント欄で提案されているように、あなたがインスタンスを輸出している、いないクラス自体

export default new App(); 

ファイルが同じインスタンスに対処することをインポートし、その結果、各コンポーネント。 これはシングルトンパターンです。希望の動作かどうかわかりません。各コンポーネントに独自のインスタンスがある場合は、代わりにクラスをエクスポートする必要があります。

export default App; 
+0

答えをありがとう。簡単な質問 - 'method1'はいくつかのオプションを受け入れる' init'関数です。私は、ライブラリを利用するすべてのコンポーネントで同じオプションを渡す必要がないようにしたい。どこでもAppインスタンスを利用できるようにするための良いアイデアはありますか? – tommyd456

+0

クラス内にデフォルトオプションオブジェクトを持つことができ、initメソッドに渡される場合に備えてこのオブジェクトを拡張することができます。そうでない場合はデフォルトを使用します。実際に、パラメータなしでmethod1()が呼び出された場合は、デフォルト設定を使用します。 – Karim

+0

残念ながら、オプションは常に私のケースで渡す必要があります。 – tommyd456

1

ここでシングルトンを作成しています。コンストラクタにブレークポイントを設定すると、インスタンスが1つしか作成されないことがわかります。

関連する問題