ES6 export 和 export default的區別

weixin_34253539發表於2019-01-30
Export

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 匯出模組，如今編輯器非常強大，安裝外掛會自動彈出模組名稱，知道其匯出怎麼使用就可以了

相關文章