ES6 単一モジュールのインポートにおける中括弧: いつ使用するのか、いつ使用しないのか?

ES6 の単一モジュールのインポートに中括弧を使用する場合

ES6 では、単一モジュールのインポートに中括弧を使用すると、予期しない動作が発生する可能性があります。中括弧を使用する場合と避ける場合を明確にするために、デフォルト エクスポートと名前付きエクスポートの違いを調べてみましょう。

デフォルト エクスポート

中括弧なしで単一のモジュールをインポートする場合、基本的にはデフォルトのエクスポートをインポートしています。デフォルトのエクスポートは次のように宣言されます。

export default <value>;

この例では、initialState.js には、initialState オブジェクトのデフォルトのエクスポートが含まれています。したがって、中括弧なしでアクセスできます。

import initialState from './todoInitialState';

名前付きエクスポート

特定のエクスポートされた値をインポートする必要がある場合は、中括弧を使用する必要があります。名前付きエクスポートは次のように宣言されます:

export const <identifier> = <value>;

TodoReducer.js の例では、export という名前の todo にアクセスしようとしています:

import { todo } from './todoInitialState';

中括弧の使用とそれらを避ける

経験則は、curly を使用することです名前付きエクスポートをインポートする場合は中括弧を使用し、デフォルトのエクスポートをインポートする場合は中括弧を避けてください。概要は次のとおりです:

• 中かっこを使用します:

  • 特定の名前付きエクスポートをインポートするとき

• 巻き毛は避ける中括弧:

  • デフォルトのエクスポートが 1 つだけあるモジュールからデフォルトのエクスポートをインポートする場合
  • デフォルトであるか名前付きであるかに関係なく、モジュールから複数のエクスポートをインポートする場合エクスポート

例

次の例を考えてみましょう:

// A.js
export default MyComponent;
export const ChildComponent = () => {};

これらをインポートするにはエクスポート:

• デフォルトのエクスポート (MyComponent):

  import MyComponent from './A';

• 名前付きエクスポート(ChildComponent):

  import { ChildComponent } from './A';

デフォルトと名前付きエクスポートの違いを理解することで、ES6 の単一モジュールのインポートに中かっこを使用するタイミングを正しく決定できます。

以上がES6 単一モジュールのインポートにおける中括弧: いつ使用するのか、いつ使用しないのか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。