ES6 export 和 export default的区别

javascript/jquery

浏览数:373

2019-1-30

AD:资源代下载服务

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";

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

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

原文地址:https://segmentfault.com/a/1190000018064918