瞭解出口的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 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'