了解在 ES6 中导出圆括号函数

Question

我正在尝试理解以下导出语句：

export default (
    <Route path="/" component={App}>
        <IndexRoute component={HomePage} />
        <Route path="about" component={AboutPage}/>
    </Route>
);

根据定义，导出语句用于导出函数、对象或原始值。

不同的语法:

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, function
export let name1 = …, name2 = …, …, nameN; // also var, const

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

在所有可能的替代方案中，我无法说明导出默认值 ( .. ) 的方式；适合。

我猜它会导出一个匿名函数。

Answer 1

当您 export default 时，您赋予用户 import NAME from 'module' 的能力，其中 NAME 是用户可以选择的内容。
您决定给导出的内容起什么名字并不重要，因为它是导出的默认名称。

因此，用户可以：

import MyRouter from 'route.js';

而且会和

完全一样

import Routing from 'route.js';

你可以做到

export default myvar = (<Route...

和

完全一样

export default someothervar = (<Route...

Note that when you talk about named exports it does matter

如果它不是默认值 - 但命名值 - 它确实很重要，因为 import 是按名称完成的：

export {var1, var2, var3}

必须导入为

import {var1, var2, var3} from 'myvars.js'

Answer 2

此规则适用：

export default expression;

(...)就是grouping operator，这是一个表达式。它只是计算它包含的表达式的结果。你肯定以前见过它。例如：

(20 + 1) * 2

有些构造要求表达式在同一行开始。在下面的示例中，函数 returns undefined，因为表达式必须与 return:

在同一行开始

function foo() {
  return
    21 + 1;
}

console.log(foo());

使用分组运算符，我们可以做到这一点：在同一行开始表达式，但出于文体原因将主要部分放在下一行：

function foo() {
  return (
    21 + 1
  );
}

console.log(foo());

我不知道在 export default 的情况下是否需要使用分组运算符，但找出它是微不足道的（运行有和没有它的代码）。

即使不需要，也不会改变表达式的结果。有时它只是为了更美观或更易于阅读。

了解在 ES6 中导出圆括号函数

Understanding Export a round bracket function in ES6

javascript

module

export

ecmascript-6