Reactjs ES6导入语句中大括号的用法是什么？

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

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

---

第二个有括号。这两者的区别是什么？什么时候应该添加括号？

好吧，您应该导入括号内的组件还是不导入括号内的组件的区别在于您导出它的方式

出口有两种类型

默认导出

命名导出

组件可以有一个默认导出和零个或多个命名导出

如果某个组件是默认导出，则需要在不带括号的情况下导入该组件

例如：

该程序将其作为

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

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

命名导出可能类似于

export const A = 25;

或

然后您可以将其作为

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

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

或

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

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

类似地，在

react

和

react dom

的情况下，

react

和

ReactDOM

分别是

默认导出

，而例如

组件

是

react

中的

命名导出

和

渲染

是

react dom

中的命名导出。这就是为什么你可以这样做

import ReactDOM from 'react-dom';

然后使用

ReactDOM.render()

---

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

如果您以默认方式导出，则无需添加括号。在模块中只能使用默认值

案例1：

export default function(num1, num2) {
    return num1 + num2; }

案例2：

function sum(num1, num2) {
    return num1 + num2; }

export { sum as default };

案例3：

function sum(num1, num2) {
    return num1 + num2; }

export default sum;

您可以导入默认值

import sum from "./test.js";

console.log(sum(1, 2));

---

考虑

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

称为“默认导出”，一个模块可能只包含一个“默认导出”

sub

和

sqr

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

大括号用于导入

单个（特定）属性

，而不带大括号的单词是

导入

整个对象

形成该文件

比如说,

import React, { Component } from 'react';

这里的单词

React

表示从文件

'React'

导入

整个对象

{Component}
表示我们指定从文件导入
特定属性。
首先，非常感谢所有其他答案

以下是以上所有问题的总结，在一个答案中

带示例的上下文

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

为了能够理解
导入
，首先了解
导出
及其类型很重要

出口类型

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

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

因此，简单的回答是，作为默认值导出的变量不需要大括号，但命名变量需要与大括号一起导入

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

默认：如何导出和导入


出口


进口

命名：如何导出和导入


出口


进口

其他注释

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


让我们重温一下上面看到的第一个示例


请注意，尽管，
React
不使用大括号，
render
使用大括号，
render
实际上是
React dom
的一部分
因此，也可以导入整个默认
react dom
不带大括号，然后使用
渲染

建议阅读无需在SOBrief上问这个问题回答：这是es6的解构
var React
将分配给从
'React'
导出的所有内容，
var render
将分配给从
'React-dom'导出的任何内容的
render
属性。
此答案的可能副本似乎非常确定。。。一个默认导出加上多个命名导出（每个脚本文件允许）。。。然后要导入默认导出：无大括号，则名为export:的导入必须使用大括号。是官方的参考资料之一吗？（ES6标准的一部分）但为什么要在默认和命名之间做出这种区分：）？
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'

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

ReactDOM.render()