React ES6 模块

模块

JavaScript 模块允许您将代码分解为单独的文件。

这使得维护代码库变得更加容易。

ES 模块依赖于import和export声明。

您可以从任何文件导出函数或变量。

让我们创建一个名为person.js，并填写我们要导出的内容。

有两种类型的导出：命名导出和默认导出。

您可以通过两种方式创建命名导出。单独排列，或同时排列在底部。

单独在线：

person.js

export const name = "Jesse"
export const age = 40

person.js

const name = "Jesse"
const age = 40

export { name, age }

让我们创建另一个文件，命名为message.js，并用它来演示默认导出。

一个文件中只能有一个默认导出。

message.js

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

您可以通过两种方式将模块导入到文件中，具体取决于它们是命名导出还是默认导出。

命名导出必须使用花括号进行解构。默认导出没有。

从文件 person.js 导入命名导出：

import { name, age } from "./person.js";

从文件 message.js 导入默认导出：

import message from "./message.js";