Javascript 为什么我必须导出常量？

我对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;

---

我真的很困惑

您可以只导出

默认值

，但默认导出不强制导入名称。因此，代码如下所示：

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

导出默认值（）=>
你好，亚当

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

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';

导出默认值（）=>
你好，亚当
//可以作为
从“./App”导入Foo；
从“/App”导入条；
从“/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 const App=（）=>
你好，亚当
//只能作为
从“/App”导入{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'

导出默认值（）=>
你好，亚当
导出常量头=（）=>头
导出常量页脚=（）=>页脚
导出常量边栏=（）=>边栏
//进口
从“/App”导入任意名称YouwantWhichisDefaultExport，{Header，Footer，Sidebar}

当您要导出一个默认值时，您想在其他地方导入它而不使用名称（当您在其他地方导入它时准确命名），那么您不能只导出带有名称的默认值，因此要导出默认值，您可以执行以下操作：

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

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

export default App;

---

您可以使用

export default

，但是默认导出没有命名，因此您必须删除

App=

part@CertainPerformance的可能重复项，但是

export default App怎么办

，不是也被命名了吗？但是导出默认应用程序怎么样在示例中，它不是也被命名吗？不，

App

指的是函数。所以，它没有命名。您不会基于名称导入默认导出：

import App from./App'。导入中的名称
App
可以是任何内容：
import anything from./App'
@secondimage after
导出默认值
需要是一个值
=
使其成为无效的语句，但您可以按其名称导入：
从“/someare.js”
导入{default as sth}。它有一个名称。@secondimage还有一点您可能会感兴趣：如果您将
App=（）=>{…}
放在括号中，它将是有效的。为什么使用const，我可以进行命名导入？因为它的工作方式是导出的名称。您不必使用const，还可以为命名导出导出导出函数头（）{}。
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'

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

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

export default App;