在ES6导入语句中使用Curly Braces有什么用

Question

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

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

第二个有括号.那两者有什么区别？什么时候应该添加括号？谢谢

Answer 1

你是否应该导入组件之间的区别export在于react它的方式.

有两种类型的出口

1. 默认导出
2. 名称导出

组件可以具有react-dom导出

如果组件是默认导出,则需要导入它而不使用括号Eg

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,您甚至可以在导入时将它们混合在一起

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

同样的情况下React和ReactDOM,default exports和Component是named export分别,而,例如react是render在react-dom和export是在一个名为出口react.这就是你可以做的原因

import ReactDOM from 'react-dom';

然后使用

ReactDOM.render()

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

Answer 2

首先，非常感谢所有其他答案。

这是上述所有内容的总结，在一个答案中。

上下文与示例

import React from 'react';          // Importing without braces
import { render } from 'react-dom'; // Importing with braces

为了能够理解import，首先要理解export它及其类型，这一点很重要。

出口类型

导出主要有两种类型：“默认”和“命名”。是否使用大括号完全取决于导入的导出变量的类型。

因此，简短的答案是，默认导出的变量不需要大括号，但命名变量确实需要用大括号导入。

现在，让我们看一些如何导入和导出这两种类型的实际示例。

默认：如何导出和导入

• 出口

// Module1.js
export default App;

// Module2.js
export default myVariable;

// Module3.js
export default myFunction;

// Please note that there can only be one default export per module!

• 输入

import App from './Module1'
import AppRenamed from './Module1'

import myVariable from, './Module2'
import myFunction from './Module3'

// Please note that default modules can be renamed when importing
// ... and they will still work!

名称：如何导出和导入

• 出口

export const A = 42
export const myA = 43
export const Something = 44

export { cube, foo, graph };

// Note how there can be several named exports per module
// exported in groups or individually

• 输入

import { A, myA } from './my-module.js';
import { Something as aRenamedVar } from './my-module.js';
import { cube } from './my-module.js';
import { foo, graph } from './my-module.js';

// Likewise, named exports can be imported in groups or individually

其他注意事项

• 让我们回顾一下上面看到的第一个例子

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

• 请注意，虽然，React不使用大括号，但render实际上render是 的一部分react-dom。
• 因此也可以导入react-dom 不带大括号的整个默认值，然后使用render

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render()