为什么我必须导出常量？

Question

我是 React 和 ES6 的新手，仍在努力理解它的语法，下面是我书中的示例代码：

import React from 'react';

export const App = () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>

export default App;

但为什么我也必须使用“const”，为什么我不能这样做；

export default App = () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>

它编译但导致运行时错误，我不知道为什么，我总是可以在没有任何错误的情况下执行以下操作：

export default function (…) { … } 

我真的很困惑

Answer 1

命名默认导出没有意义，因为当您导入它时，您可以将其作为任何东西导入

export default () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>

// can be imported as
import Foo from './App';
import Bar from './App';
import AnythingYouCanThinkOf from './App';

如果你想命名导入：

export const App = () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>

// can be imported only as
import { App } from './App';

另外请注意，一个文件中可以有多个命名导出，但只有一个默认导出。

export default () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>
export const Header = () => <div>Header</div>
export const Footer = () => <div>Footer</div>
export const Sidebar = () => <div>Sidebar</div>

// imports
import AnyNameYouWantWhichIsDefaultExport, { Header, Footer, Sidebar } from './App'

Answer 2

当你要导出一个 default 值时，你想在其他地方不带名称地导入它（当你在其他地方导入它时准确地命名它）然后你不能只是 export默认 它带有名称，因此要导出默认值，您可以执行以下操作：

// Just export it
export default () => ...

// Or this way
const App = () => ...

export default App;

Answer 3

您可以只导出default，但默认导出不会在导入时强制使用名称。因此，代码如下所示：

export default () => <h1 className="bg-primary text-white text-center p-2">
  Hello Adam
</h1>