ES6 export 和 export default的区别

2024年2月9日 152次阅读 来源: zxc19890923

ES6中 export 和 export default 与 import使用的区别，使用 react native 代码详解

一、使用export 和 import

1、export 定义导出一个子组件 Greeting

import React, { Component } from "react";
import { View, Text } from "react-native";
export class Greeting extends Component {
    render() {
        return(
            <View>
                <Text>{this.props.name}</Text>
            <View>
        )
    }
}

2、在父组件中导入子组件

import React, { Component } from "react";
import { View, Text } from "react-native";

// greeting文件存储在src目录下
import { Greeting } from "./src/greeting";

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（greeting.js）对外接口的名称Greeting相同。
如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名

import { bieming as Greeting } from "./src/greeting";

3、export default
场景：从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名，否则无法加载。但是用户肯定不愿意去阅读子组件看看导出名称叫啥，然后回来导入，所以就有了 export default。

import React, { Component } from "react";
import { View, Text } from "react-native";
export default class Greeting extends Component {
    render() {
        return(
            <View>
                <Text>{this.props.name}</Text>
            <View>
        )
    }
}

4、import 导入模块

import React, { Component } from "react";
import { View, Text } from "react-native";

// greeting文件存储在src目录下
import Greeting from "./src/greeting";
// 或者
import AnyName from "./src/greeting";

// 项目中导入 lodash模块，jquery模块
import * as _ from "lodash";
import * as $ from "jquery";

上面代码的import命令，可以用任意名称指向greeting.js输出的方法，这时就不需要知道原模块输出的变量名。需要注意的是，这时import命令后面，不使用大括号。

总结：现在流行的前端框架，angular+ 主要使用 export 导出模块，react native 中使用 export default 导出模块，如今编辑器非常强大，安装插件会自动弹出模块名称，知道其导出怎么使用就可以了

    原文作者：zxc19890923
    原文地址: https://segmentfault.com/a/1190000018064918
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞