[Javascript] 什麼時候應該使用花括號來進行ES6導入?


Answers

TL; DR :如果您想導入非默認導出,則使用大括號。

有關更多詳細信息,請參閱上面的Dan Abramovs答案。

Question

這似乎很明顯,但是我發現自己對於在ES6中何時使用花括號來導入單個模塊有點困惑。 例如,在我正在開發的React-Native項目中,我有以下文件及其內容:

initialState.js

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 ,那麼下面這行代碼會出現以下錯誤:

無法讀取未定義的屬性待辦事項

TodoReducer.js

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

類似的錯誤也會發生在我的組件與花括號。 我想知道什麼時候應該使用花括號來進行單個導入,因為顯然,當導入多個組件/模塊時,必須將它們放在花括號中,我知道。

編輯

here的SO帖子並沒有回答我的問題,而是問我何時應該或不應該使用花括號來導入單個模塊,或者我不應該使用花括號來導入ES6中的單個模塊(這顯然不是案例,因為我已經看到需要花括號的單一進口)




上面的丹阿布拉莫夫答案解釋了默認出口命名出口

使用哪個?

引用David Herman :ECMAScript 6支持單一/默認導出樣式,並為導入默認樣式提供了最好的語法。 導入命名導出可以甚至應該稍微簡潔。

但是,在TypeScript中,由於重構,導出受到青睞。 例如,如果您默認導出某個類並對其進行重命名,則類名稱將僅在該文件中更改,而不會在其他引用中更改,並且將在所有引用中重命名具有名稱的導出類名稱。 命名輸出也是實用程序的首選。

無論你喜歡整體使用。

額外

默認導出實際上是名稱為default的命名導出,因此默認導出可以導入為:

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