react-native 之匯入(import)、匯出(export)深刻解析
最近每天業餘時間,抽空讀了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表示式方式進行重新命名(起別名),最終的結果是在呼叫時,原始名稱不能使用,別名則起作用。
完結!
相關文章
- 完全可傳輸的匯出/匯入(full transportable export/import)ExportImport
- [Docker核心之容器、資料庫檔案的匯入匯出、容器映象的匯入匯出]Docker資料庫
- Activity 流程模型匯入匯出-activity流程模型匯入匯出模型
- Java之POI操作Excel表-匯入匯出JavaExcel
- Mysql匯入&匯出MySql
- doris匯入匯出
- esayExcel匯入匯出Excel
- Magicodes.IE之匯入匯出篩選器
- vue excel匯入匯出VueExcel
- navlicat 匯入匯出SQLSQL
- Golang-import匯入包語法GolangImport
- go 語言模組匯入importGoImport
- Oracle資料庫匯入匯出。imp匯入命令和exp匯出命令Oracle資料庫
- SpringBoot+Vue之表格的CRUD與匯入匯出Spring BootVue
- sqoop用法之mysql與hive資料匯入匯出OOPMySqlHive
- Angular Excel 匯入與匯出AngularExcel
- sqoop資料匯入匯出OOP
- Oracle 資料匯入匯出Oracle
- 資料泵匯出匯入
- .net6 匯入匯出
- Oracle資料匯入匯出Oracle
- phpMyAdmin匯入/匯出資料PHP
- 【docker】docker映象匯出匯入Docker
- scss :export 中匯出的變數為空CSSExport變數
- ASP.NET 開源匯入匯出庫Magicodes.IE 完成Csv匯入匯出ASP.NET
- import匯入檔案路徑注意點Import
- MySQL Shell import_table資料匯入MySqlImport
- Excel模板匯出之動態匯出Excel
- Vue框架下實現匯入匯出Excel、匯出PDFVue框架Excel
- export/importExportImport
- vue + element + 匯入、匯出excel表格VueExcel
- sqoop部署及匯入與匯出OOP
- (十一)Electron 匯入匯出檔案
- docker匯入&匯出離線映象Docker
- SQLServer匯出匯入資料到MySQLServerMySql
- kxcel, 方便匯入和匯出 ExcelExcel
- AWR跨庫匯出與匯入
- datapump 匯出匯入ORA-07445