ES6导入语句中使用了大括号

我可以看到有两种不同的导入方式

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

第二个有括号。 那么两者有什么区别呢？ 何时添加括号？ 谢谢

Answer 1

那么你是否应该导入within brackets or without it组件之间的区别在于你的export方式。

有两种types的出口

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'; 

如果您的组件有一个默认的导出和less量的命名导出，您甚至可以在导入时将它们混合在一起

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

类似地，在react和react-dom情况下， React和ReactDOM分别是default exports ，而例如Component是react的named export ，而render是react中的命名导出。 那就是你可以做的原因

 import ReactDOM from 'react-dom'; 

然后使用

 ReactDOM.render() 

或者像你在问题中提到的那样使用它。

Answer 2

如果您导出为默认值，则不需要添加括号。 你可以在模块中只有默认值。

情况1：

导出默认函数（num1，num2）{return num1 + num2; }

案例2：

函数sum（num1，num2）{return num1 + num2; }

export {sum as default};

情形3：

函数sum（num1，num2）{return num1 + num2; }

出口违约金额;

您可以导入默认值

从“./test.js”导入总和;

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

Answer 3

考虑一下primitives.js ，

 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被称为“Default Export”，一个模块可能只包含一个“Default Export”。

sub和sqr被称为“命名导出”，一个模块可能包含多个命名导出。