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

Question

我试图理解以下出口声明：

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

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

不同句法

导出{ name1，name2，…，nameN }；导出{ variable1作为name1，variable2作为name2，…，nameN }；导出name1，name2，…，nameN；//也是var，函数导出让name1 =…，name2 =…，…，nameN；//也是var，const导出默认表达式；导出默认函数(…){…} //也是类，函数*导出默认函数name1(…){…} // as类，函数*导出{ name1作为默认值，…}；从…导出*；输出{ name1，name2，…，nameN }来自…；导出{ import1为name1，import2为name2，…为，nameN }来自…；

在所有可能的替代方案中，我无法说明出口违约( ..)；适应。

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

Answer 1

这一规则适用于：

export default expression;

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

(20 + 1) * 2

有些构造要求在同一行上启动表达式。在下面的示例中，函数返回undefined，因为表达式必须从与return相同的行开始

​

function foo() {
  return
    21 + 1;
}

console.log(foo());

​

使用分组运算符，我们可以准确地完成以下操作:在同一行上启动表达式，但将主部分放在下一行，原因如下：

​

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

console.log(foo());

​

我不知道在export default的情况下是否需要使用分组操作符，但是找出(运行有和不带它的代码)是很简单的。

即使它不是必需的，它也不会改变表达式的结果。有时，它只是在视觉上更令人愉悦，或者更容易阅读。

Answer 2

当您使用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...

请注意，当您谈论命名导出时，它确实很重要。

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

export {var1, var2, var3}

必须作为

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