react-native 之匯入(import)、匯出(export)深刻解析

學術袁發表於2018-08-21
ReactImportExport

最近每天業餘時間，抽空讀了2小時的書，把JavaScript 忍者祕籍（第二版）通篇過了一邊。想想為了react-native我還是蠻拼的。之前剛學習react-native的時候，曉得是以JavaScript作為語言基礎的。然後邊學習react-native邊學習JavaScript，然後邊記錄學習心得。初學狀態雖有一股濃重的好奇心、求知勁頭和不知疲倦，但是瞭解到的知識畢竟有限，知識結構也不會那麼完整。只有慢慢的積累，知識才能越加豐富。因此，這裡就為之前不完整的JavaScript在ES6上的記錄使用，做下補充，深刻解析下在我使用過程中遇到得疑惑。

匯入和匯出功能

先看倆個例子,使用兩種形式的匯入匯出

例[1]

// Counter.js
export function increment() {
  return {
    type: 'increment'
  };
}

export function decrement() {
  return {
    type: 'decrement'
  };
}

export function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState();

    if (counter.get('counter') % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}

Counter.js 使用方式
第一步，匯入：
import {increment, decrement, incrementIfOdd} as actions from '../../src/actions/Counter.js;
當然也可以這樣寫：import * as actions from '../../src/actions/Counter.js;
第二步，呼叫： const incre = actions.increment();

例[2]

這裡寫圖片描述

第一步，匯入：
import NewJohson from '../../src/actions/CompareJohson.js;
import {compareJohsons } from '../../src/actions/CompareJohson.js;
當然也可以這樣寫：import NewJohson，{compareJohsons } from '../../src/actions/CompareJohson.js;
{compareJohsons }而這種{...}匯入方式，一般存在情況是在非預設匯出情況下的，屬性和方法命名方式。以起別名來達到以一種對映陣列的功能再呼叫；而預設的匯出模式的匯出一般在class的命名方式上。

第二補，呼叫：
const johson= new compareJohsons("johson");
compareJohsons ();

以上，是JavaScript ES6版本的程式碼模組化

*在這裡我只想要去解釋一個我疑惑過的問題——預設匯出與普通匯出的區別？？

預設匯出 類似export default class Johson{}，象CompareJohson.js中的第2行程式碼；
普通匯出類似 export function compare(val1, val2)，象CompareJohson.js中的第8行程式碼；
總結：兩者字面上的區別就是default ，但是在使用上是很不相同的。怎麼解釋呢？從上面程式碼對比著看，我們可以為預設匯出的做自定義匯入的命名，即並不一定使用匯出時的命名。
從上面程式碼對比截圖體會下，預設匯出方式的不同；
這裡寫圖片描述

並附：有時候使用上，匯出時使用default預設匯出方式，可以不宣告屬性名，而在匯入時進行宣告。比如

//ScreenStyle.js
export default StyleSheet.create({
    image_header_left: {
        height: 24,
        width: 24,
        marginLeft: 8,
    },
    image_header_right: {
        height: 24,
        width: 24,
        marginRight: 8,
    },
    ...
    image_report_button: {
        height: 56,
        width: 56,
        marginRight: 16
    }

});

使用方式上，依舊是先匯入，再呼叫：
匯入：import Styles from "./styles/ScreenStyle"; 這裡可以看出，預設模式下可以在匯出時不宣告屬性名，而在匯入時進行自定義宣告。
使用上這裡寫圖片描述

*另一個疑惑點——匯出、匯入重新命名（起別名）？？

起別名基本上回出現在兩個地方，匯出時起別名和匯入時起別名。
匯出時起別名 這裡寫圖片描述

匯入時起別名這裡寫圖片描述

起別名目的是1，以我們熟悉、易記的方式內容命名；2，化繁為簡，將要匯入的內容以對映陣列的方式進行呼叫；
在上面我簡單寫的兩種方式上，在關鍵字export表示式方式進行重新命名（起別名）以及關鍵字import表示式方式進行重新命名（起別名），最終的結果是在呼叫時，原始名稱不能使用，別名則起作用。
完結！

相關文章