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

版权声明：情之所钟，虽丑不嫌。 https://blog.csdn.net/u012827205/article/details/81905526

最近每天业余时间，抽空读了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表达式方式进行重命名（起别名），最终的结果是在调用时，原始名称不能使用，别名则起作用。
完结！