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

Question

如果导出与其定义一致的es6默认类与其定义后的文件末尾有什么区别？

下面是我在“反应教程”中遇到的两个例子。

例如。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>

​