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;
导入
你可以通过两种方式将模块导入文件,这取决于它们是命名导出还是默认导出。
命名导出必须使用花括号进行解构。默认导出则不需要。