出口、进口和违约，天哪！

ES6 模块

一步一个脚印

好的，现在让我们使用它

缺少默认值，又名命名导入

把一切都给我！

还不错

我最近一直在使用 cli 或启动模板启动项目，我注意到的一件事是其中包含了多少我们认为理所当然的代码。

引起我注意的第一个代码片段是生成新的 React 项目时导出 App 组件的代码行。

class App extends Component {
  render() {
    return (
      <h1>This is my application.</h1>
    )
  }
}

export default App

因此，我想借此机会讲解一下这段简短但功能强大的代码，并分析一下发生了什么以及为什么会出现这种情况。

ES6 模块

Javascript 标准所基于的ECMAScript在 ES6 中引入了模块的概念。

模块是一个独立的代码单元。该代码可以使用 向其他模块公开资源export。它也可以使用 来使用其他模块的资源import。

上面的代码是 React 如何使用此概念在组件之间传递信息的示例。

记住这一点很重要，因为 ES6 规范略有不同。

一步一个脚印

让我们只检查一下这一行代码。

export default App

• 首先我们有export，该关键字将内容暴露给其他模块。

• 接下来我们有default。

默认导出是 ES6 中可用的导出类型之一。使用 default 关键字，意味着如果您导入此模块但不指定要从中导入的内容，则会得到此结果！对于任何给定模块，我们只能有一个默认导出。

• 最后，我们得到了要导出的资产的名称，在本例中为App。

好的，现在让我们使用它

由于App已导出，我们可以在另一个模块中使用它import。

import App from "./App"

index.js当您创建 React 项目时，会出现这一行代码。

我们使用上面的语法导入默认导出。有趣的是，这里App只是一个名称赋值。这条语句实际上是在说，你还没有指定资源来源，.App所以我将使用默认导出的资源并为其赋值，以供参考。

结果发现，我们App根本就不需要给它命名。这只是一个名称分配而已。

import Whatever from "./App"

在这种情况下，Whatever它仍然是我们的 App 组件！我们可以使用它。

ReactDOM.render(<Whatever />, document.getElementById('root'));

缺少默认值，又名命名导入

那么导出多个资源或非默认资源呢？具体是什么样的呢？

export class App extends Component {
  render() {
    return (
      <h1>This is my application.</h1>
    )
  }
}

以上是导出相同 App 资产的示例，但没有使用默认关键字。

这可以，但我们不能用同样的方式导入它。如果我尝试这样做

import App from "./App"

它给了我这个错误

我的导入语句不知道它给该App名称分配了什么！

如果没有默认导出，我需要明确指定要导入的内容。这就是为什么在 ES6 中它被称为命名导入。

import {App} from "./App"

这看起来很像解构赋值！虽然从技术上讲，构建时和运行时有所不同，但这确实有助于记住语法。所以这条语句实际上是在说，查看整个.App模块内部。我希望导出的资源App在该模块内部被调用。

把一切都给我！

由于可以在单个模块中导出多个资源，因此也需要能够一次导入多个资源。只要我们知道资源名称，就可以做到这一点。

import {App, Dev, Post} from "./App"

你可以在单个模块中同时使用默认导出和命名导出，并将它们一起导入。我们假设App仍然是默认导出。

import App, {Dev, Post} from "./App"

瞧！

还不错

分解一下其实并不复杂。然而，我们经常会在框架和项目中看到一些我们不愿花时间去理解的废弃代码。我鼓励你带着好奇心去探索你所看到的一切！这会让你成为一个更优秀的程序员。