ES6 export 和 export default的区别

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

1、使用export 和 import

一、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>
        )
    }
}

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

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

三、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>
        )
    }
}

四、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 导出模块，现在编辑器很是强大，安装插件会自动弹出模块名称，知道其导出怎么使用就能够了