好吧，是否应该在括号内导入组件之间的区别在于您使用export它的方式。

有两种类型的导出

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

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

如果组件是默认导出，那么您需要在不带括号的情况下导入它。

例如，

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

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

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

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

import ReactDOM from 'react-dom';

然后使用

ReactDOM.render()

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

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

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

上下文与示例

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()

考虑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称为“默认导出”并且一个module可能仅包含一个“默认导出”。

sub并且sqr被称为“命名导出”，一个module可能包含多个命名导出。

大括号用于 import single(specific) property，而没有大括号的单词是import entire object该文件的形式。

例如，

import React, { Component } from 'react';

这里这个词React代表entire object从文件中导入'react'。

{Component}意味着我们指定particular property从文件导入。

如果您默认导出，则无需添加括号。您只能在module中使用默认值。

情况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));