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 導出模塊，現在編輯器很是強大，安裝插件會自動彈出模塊名稱，知道其導出怎麼使用就能夠了