ES6のインポートに中括弧を使用する必要があるのはいつですか？

当たり前のようですが、ES6で単一のモジュールをインポートするときに中括弧を使用する場合について、少し混乱しました。たとえば、私が取り組んでいるReact-Nativeプロジェクトには、次のファイルとそのコンテンツがあります。

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

TodoReducer.jsでは、中括弧なしでインポートする必要があります。

import initialState from './todoInitialState';

initialState中括弧で囲むと、次のコード行で次のエラーが発生します。

未定義のプロパティtodoを読み取れません

export default function todos(state = initialState.todo, action) {
// ...
}

中括弧が付いているコンポーネントにも同様のエラーが発生します。複数のコンポーネント/モジュールをインポートするときは、中括弧で囲む必要があることは明らかです。

編集：

SOポストここでは、代わりに私が求めています、私の質問に答えていないとき、私はまたはインポートするための中括弧を使用すべきでない単一（これは明らかではないモジュールを、あるいは私がES6で単一のモジュールをインポートするための中括弧を使用しないでください中括弧が必要な単一のインポートを見たので、ケース）

これはデフォルトのインポートです：

// B.js
import A from './A'

デフォルトのエクスポートAがある場合にのみ機能します。

// A.js
export default 42

この場合、インポート時に割り当てる名前は問題ではありません。

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

常にデフォルトのエクスポートであるものに解決されるからですA。

これは、次の名前のインポートAです。

import { A } from './A'

次の名前のエクスポートAが含まれている場合にのみ機能します。A

export const A = 42

インポートしているので、この場合、名前は重要輸出名で特定のものを：

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

これらを機能させるには、対応する名前付きエクスポートをに追加しますA。

// A.js
export const A = 42
export const myA = 43
export const Something = 44

モジュールにはデフォルトのエクスポートを1つだけ含めることができますが、名前付きエクスポートはいくつでも（0、1、2、またはそれ以上）作成できます。それらをすべて一緒にインポートできます。

// B.js
import A, { myA, Something } from './A'

ここでは、デフォルトのエクスポートをとしてインポートし、A名前付きエクスポートをそれぞれとmyAと呼びSomethingます。

// A.js
export default 42
export const myA = 43
export const Something = 44

また、インポート時にそれらにすべて異なる名前を割り当てることもできます。

// B.js
import X, { myA as myX, Something as XSomething } from './A'

デフォルトのエクスポートは、通常モジュールから取得することが予想されるすべてのものに使用される傾向があります。名前付きエクスポートは、便利なユーティリティに使用される傾向がありますが、必ずしも必要ではありません。ただし、エクスポートする方法を選択するのはあなた次第です。たとえば、モジュールにデフォルトのエクスポートがまったくない場合があります。

これはESモジュールの優れたガイドであり、デフォルトのエクスポートと名前付きエクスポートの違いを説明しています。

import注目に値するES6キーワードには、スター付き表記もあると思います。

ログミックスをコンソール化しようとする場合：

import * as Mix from "./A";
console.log(Mix);

あなたは得るでしょう：

ES6のインポートに中括弧を使用する必要があるのはいつですか？

モジュールの特定のコンポーネントのみが必要な場合、ブラケットは黄金色です。これにより、webpackなどのバンドラーのフットプリントが小さくなります。

上記のDan Abramovの回答では、デフォルトのエクスポートと名前付きエクスポートについて説明しています。

どちらを使用しますか？

David Hermanの引用：ECMAScript 6は、単一/デフォルトのエクスポートスタイルを優先し、デフォルトのインポートに最適な構文を提供します。名前付きエクスポートのインポートは、多少簡潔になる場合があります。

ただし、TypeScriptでは、リファクタリングのため、名前付きエクスポートが推奨されます。たとえば、クラスをデフォルトでエクスポートして名前を変更すると、クラス名はそのファイルでのみ変更され、他の参照では変更されません。名前付きエクスポートクラス名はすべての参照で名前が変更されます。名前付きエクスポートは、ユーティリティにも推奨されます。

全体的に好きなものを使用してください。

追加

デフォルトのエクスポートは実際にはdefaultという名前の名前付きエクスポートであるため、デフォルトのエクスポートは次のようにインポートできます。

import {default as Sample} from '../Sample.js';

importノードモジュール、オブジェクト、およびデストラクタリングの単なる構文糖質と考えると、かなり直感的です。

// bar.js
module = {};

module.exports = { 
  functionA: () => {},
  functionB: ()=> {}
};

 // really all that is is this:
 var module = { 
   exports: {
      functionA, functionB
   }
  };

// then, over in foo.js

// the whole exported object: 
var fump = require('./bar.js'); //= { functionA, functionB }
// or
import fump from './bar' // same thing, object functionA and functionB props


// just one prop of the object
var fump = require('./bar.js').functionA;

// same as this, right?
var fump = { functionA, functionB }.functionA;

// and if we use es6 destructuring: 
var { functionA } =  { functionA, functionB };
// we get same result

// so, in import syntax:
import { functionA } from './bar';

importステートメントで中括弧の使用を理解するには、まずES6で導入された破棄の概念を理解する必要があります

1. オブジェクトの破壊

   var bodyBuilder = {
     firstname: 'Kai',
     lastname: 'Greene',
     nickname: 'The Predator'
   };
   
   var {firstname, lastname} = bodyBuilder;
   console.log(firstname, lastname); //Kai Greene
   
   firstname = 'Morgan';
   lastname = 'Aste';
   
   console.log(firstname, lastname); // Morgan Aste

2. 配列の破壊

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
   
   console.log(firstGame); // Gran Turismo

   リストマッチングの使用

     var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
     console.log(secondGame); // Burnout

   スプレッド演算子の使用

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// ['Burnout', 'GTA'];

これで解決できたので、ES6では複数のモジュールをエクスポートできます。次に、以下のようにオブジェクトの分解を利用できます

と呼ばれるモジュールがあるとしましょう module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

エクスポートした関数をにインポートしたいindex.js。

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

次のように異なる変数名を使用することもできます

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

要約ES6モジュール：

エクスポート：

エクスポートには2つのタイプがあります。

1. 名前付きエクスポート
2. デフォルトのエクスポート、モジュールあたり最大1

構文：

// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}

輸入：

エクスポートのタイプ（つまり、名前付きまたはデフォルトのエクスポート）は、何かをインポートする方法に影響します。

1. 名前付きエクスポートでは、中括弧と、エクスポートされた宣言（つまり、変数、関数、またはクラス）として正確な名前を使用する必要があります。
2. デフォルトのエクスポートでは、名前を選択できます。

構文：

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // for our named imports

// syntax single named import: 
// import { importantData_1 } 

// for our default export (foo), the name choice is arbitrary
import ourFunction from './A';   

興味のあること：

1. 名前付きエクスポートには、エクスポートの名前と一致する中括弧内のコンマ区切りリストを使用します。
2. デフォルトのエクスポートには、中括弧なしの任意の名前を使用します。

エイリアス：

名前付きインポートの名前を変更したい場合は、エイリアスを使用してこれを行うことができます。この構文は次のとおりです。

import { importantData_1 as myData } from './A';

これでインポートされましたimportantData_1 が、識別子はではmyDataなくですimportantData_1。

通常、関数をエクスポートするときは、{}を使用する必要があります

if you have export const x 

あなたが使う import {x} from ''

if you use export default const x 

import X from '' ここで使用する必要があります。Xを任意の変数に変更できます。

中括弧（{}）は名前付きバインディングをインポートするために使用され、その背後にある概念は構造化割り当てです

importステートメントがどのように機能するかを示す簡単なデモンストレーションは、JavaScriptのインポートで「{}」を使用するのはいつですか？

中括弧は、エクスポートに名前が付けられている場合にインポートにのみ使用されます。エクスポートがデフォルトの場合、中括弧はインポートに使用されません。

デフォルトのエクスポートでは、インポート時に{}を使用しません。

例えば

player.js

export default vx;

index.js

import vx from './player';

index.js

player.js

エクスポートしたものすべてをインポートする場合は、*を使用します。