React ES6 模块
模块
JavaScript 模块允许您将代码分解成单独的文件。
这使得维护代码库更加容易。
ES Modules 依赖于 import
和 export
语句。
导出 (Export)
您可以从任何文件中导出函数或变量。
让我们创建一个名为 person.js
的文件,并填充我们想要导出的内容。
有两种类型的导出:命名导出 (Named) 和默认导出 (Default)。
命名导出 (Named Exports)
您可以通过两种方式创建命名导出。内联单独导出,或在文件底部一次性导出。
示例
内联单独导出
person.js
export const name = "Jesse"
export const age = 40
在底部一次性导出
person.js
const name = "Jesse"
const age = 40
export { name, age }
默认导出 (Default Exports)
让我们创建另一个名为 message.js
的文件,并使用它来演示默认导出。
每个文件只能有一个默认导出。
示例
message.js
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
导入 (Import)
您可以两种方式将模块导入到文件中,具体取决于它们是命名导出还是默认导出。
命名导出必须使用花括号进行解构。默认导出则不需要。