导出 es6 默认值 class 与定义内联还是在文件末尾？

Question

导出 es6 默认 class 与其定义内联与在其定义后的文件末尾导出之间有什么区别？

以下是我在 React 教程中遇到的两个示例。

例如。 1：内联 Class

export default class App extends React.Component {
    // class definition omitted
}

例如。 2: 文件结束

class App extends React.Component [
    // class definition omitted
}

export default App; // is this different somehow?

如果没有区别，那么第一个例子似乎更高效和简洁。

Answer 1

唯一的显着区别是，当导出 class 或命名函数声明以外的内容时，先声明表达式然后再导出，这样您就可以在同一模块的其他地方引用它。

Class 名称和（非箭头，命名的）函数声明将它们的名称作为变量放入模块的范围内：

<script type="module">
export default class App {
    // class definition omitted
}
console.log(typeof App);
</script>

<script type="module">
export default function fn() {
    
}
console.log(typeof fn);
</script>

但这对于其他类型的表达式来说是不可能的，例如普通对象或箭头函数表达式，它们本质上没有与之关联的名称：

<script type="module">
export default {
  prop: 'val'
  // There's no way to reference the exported object in here
}
// or out here
</script>

<script type="module">
export default () => 'foo';
// There's no way to reference the exported function elsewhere in this module
</script>

好吧，有一种方法可以取回对它的引用，即导入您所在的当前模块：

// foo.js
import foo from './foo';
export default () => {
  console.log('foo is', typeof foo);
};

但这看起来确实丑陋且令人困惑。

因此，如果您默认导出的内容既不是 class 也不是函数声明，则您无法轻松引用要导出的内容，除非您在导出前将其放入独立变量中它。

请记住，这不是命名导出的情况，可以很容易通过它们的导出名称引用：

<script type="module">
export const obj = {
  prop: 'val'
};
console.log(typeof obj);

export const fn = () => 'foo';
console.log(typeof fn);
</script>

导出 es6 默认值 class 与定义内联还是在文件末尾？

Export an es6 default class inline with definition or at end of file?

javascript

ecmascript-6

es6-modules