了解在ES6中导出圆括号功能

Question

我想了解以下导出声明:

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

根据定义,export语句用于导出函数,对象或原始值.

不同的语法:

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

(...)是分组运算符,它是一个表达式.它只是计算它包含的表达式的结果.你以前肯定见过它.例如:

(20 + 1) * 2

某些构造需要在同一行上启动表达式.在下面的示例中,函数返回undefined,因为表达式必须在与以下行相同的行中开始return:

function foo() {
  return
    21 + 1;
}

console.log(foo());

使用分组运算符,我们可以做到这一点:在同一行上启动表达式,但将主要部分放在下一行,出于样式原因:

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

console.log(foo());

我不知道在这种export default情况下是否需要使用分组运算符,但是找出(使用和不使用代码运行代码)将是微不足道的.

即使不需要,也不会改变表达式的结果.有时,它只是习惯于在视觉上更令人愉悦或更容易阅读.