什么是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被称为“命名导出”，并且一个模块可能包含多个命名导出。