javascript - 导出与定义内联或在文件末尾的 es6 默认类？

Question

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

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

前任。 1:内联类

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

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

类名和(非箭头，命名)函数声明将它们的名称作为变量放入模块的范围:

<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);
};

但这看起来真的很丑陋和令人困惑。

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

请记住，命名导出不是这种情况，可以通过其导出名称轻松引用:

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

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