什麼是ES6 import語句

Question

使用大括號我可以看到有兩種不同的方式導入

import React from 'react' 
import { render } from 'react-dom' 

第二個有支架。那麼兩者有什麼區別？何時添加括號？謝謝

Answer 1

那麼你是否應該導入你的組件within brackets or without it的區別在於你的方式你export它。

有兩種類型的出口

1. 默認出口
2. 名稱導出

一個組件可以one default export and zero or more named出口

如果一個組件是一個默認的出口，那麼你需要導入它沒有括號 例如

export default App; 

進口它作爲

import App from './path/to/App'; 

命名的出口也能像

export const A = 25; 

或

export {MyComponent}; 

的，你可以導入爲

import {A} from './path/to/A'; 

或

import {A as SomeName} from './path/to/A'; 

如果您的組件有一個默認的導出和幾個名爲export，你甚至可以混合在一起他們，而在react和react-dom，React和案例導入

import App, {A as SomeName} from './path/to/file'; 

同樣ReactDOM分別是default exports，而例如Component是中​​的和render是react-dom中的命名導出。這就是原因，你可以做

import ReactDOM from 'react-dom'; 

然後用

ReactDOM.render() 

或者用它喜歡在你的問題中提到。

Answer 2

如果您導出爲默認值，則無需添加括號。您只能在模塊中使用默認值。

情形1：

出口缺省功能（NUM1，NUM2）{ 返回NUM1 + NUM2; }

情形2：

函數sum（NUM1，NUM2）{ 返回NUM1 + NUM2; }

export {sum as default};

情形3：

函數sum（NUM1，NUM2）{ 返回NUM1 + NUM2; }

export default sum;

你可以從 「./test.js」 導入默認

進口總和;

console.log（sum（1，2））;

Answer 3

考慮​​，

export default (a, b) => a + b; 
export const sub = (a, b) => a - b; 
export const sqr = a => a**2; 

它可以導入像這樣，

import sum, { sub, sqr } from './primitives'; 

在這種情況下，sum被稱爲 「默認導出」 和模塊可以包含一個單一的「默認導出「。

sub和sqr被稱爲「命名導出」，並且一個模塊可能包含多個命名導出。