ES6 import 语句中花括号的用途是啥？

Posted 2023-02-21

【中文标题】ES6 import 语句中花括号的用途是啥？

【英文标题】：What is use of curly braces in an ES6 import statement?ES6 import 语句中花括号的用途是什么？

【发布时间】：2017-05-11 07:12:04

【问题描述】：

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

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

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

【问题讨论】：

推荐阅读 2ality.com/2014/09/es6-modules-final.html 不需要在 SO 上问这个

简要回答：这是 es6 解构开始发挥作用。 var React 将分配给从'react' 导出的所有内容，var render 将分配给从'react-dom' 导出的所有内容的render 属性

When should I use curly braces for ES6 import?的可能重复

【参考方案1】：

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

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

示例背景

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

要了解import，首先要了解export及其类型。

出口类型

主要有两种类型的导出，'default'和'named'。是否使用大括号，完全取决于导入的是哪种类型的导出变量。

所以，简短的回答是默认导出的变量，不需要需要大括号，但命名变量需要用大括号导入。

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

默认：如何导出和导入

出口

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

【参考方案2】：

大括号用于导入single(specific) property，而没有大括号的单词是importentire object形成该文件。

例如，

import React,  Component  from 'react';

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

Component 表示我们指定从文件中导入particular property。

【参考方案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 称为“默认导出”，一个模块可能只包含一个“默认导出”。

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

【参考方案4】：

如果您默认导出，则无需添加括号。模块中只能有默认值。

案例一：

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

【参考方案5】：

嗯，您是否应该在括号内或不带括号导入组件之间的区别在于您export它的方式。

有两种类型的导出

默认导出 命名导出

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

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

例如，

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

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

【讨论】：

这个答案似乎非常明确... 一个 默认导出 plus 多个命名导出（每个脚本文件允许）... 然后导入默认导出：没有大括号，导入命名导出：必须使用大括号。是官方参考developer.mozilla.org/en-US/docs/Web/javascript/Reference/… 之一吗？ （ES6 标准的一部分）

但是为什么要区分默认和命名:)？