ReactNative—常用的导入导出方式

2019-01-08 本文已影响2人素月某某

React Native中常用的导入导出方式主要包括三种：require() 、 import '' 和 @providesModule

1 require方式

由CommonJS提供支持。

CommonJS是nodejs也就是服务器端广泛使用的模块化机制。该规范的主要内容是，模块必须通过module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。

导出方式

导出变量

var x = 5;
module.exports.x = x;

导出函数

var addX = function (value) {
  return value + x;
};
module.exports.addX = addX;

导出多个文件

module.exports = {
    TripComputation: require('./TripComputation'),
    FlightComputation:require("./FlightComputation"),
};

导入方式

var app = require('./app.js');

限制

require()的导入方式，在代码块外部、内部均可以使用

2 import方式

由ES6提供支持

    ES6正式提出了内置的模块化语法，我们在浏览器端无需额外引入requirejs来进行模块化。

export导出

导出变量

export var color = "red";
export let name = "cz";
export const age = 25;

导出函数

export function add(num1,num2){
    return num1+num2;
}

导出类

export class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
}

导出对象

function multiply(num1, num2) {
    return num1 * num2;
}

export {multiply}

导出时重命名

//重命名变量
export color as newColor;

//重命名函数
export {multiply as newMultiply}

//重命名类
export Rectangle as NewRectangle

导出默认值

export default function(num1, num2) {
    return num1 + num2;
}

模块的默认值是使用 default 关键字所指定的单个变量、函数或类，而你在每个模块中只能设置一个默认导出。

function sum(num1, num2) {
    return num1 + num2;
}

export { sum as default };

使用重命名语法来导出默认值。

import导入

导入一个（变量、函数、类）

一个文件导入的内容相当于一个模块，若是从这个模块中导入一个变量、函数或类，则相当于从一个对象中进行解构。

import {sum} from './example.js'

导入多个（变量、函数、类）

import {sum, multiply} from './example.js'

导入整个模块

将整个模块当做单一对象导入，该模块的所有导出都会作为对象的属性存在,这种导入格式被称为命名空间导入。

import * as example from './example.js';
example.sum(1,2);
example.multiply(2,3);

重命名导入

import { sum as add} from './example.js'

导入默认值

//导出默认值
export default function(num1, num2) {
    return num1 + num2;
}

//导入默认值，sum 被用于代表目标模块所默认导出的函数，因此无需使用花括号
import sum from "./example.js";

//默认值和非默认值在同一个文件中导出
export let color = "red";

export default function(num1, num2) {
    return num1 + num2;
}

//同时导入默认值和非默认值，默认名称必须位于非默认名称之前
import sum,{color} from "./example.js"

导入的再导出

有时想在当前的模块中将已导入的内容再导出去

//写法一
import {sum} from './example.js'
……
export {sum}

//写法二
export {sum} from './example.js'

//重命名的写法
export { sum as add } from "./example.js";

//整个模块导出法
export * from "./example.js";

使用限制

export 与 import必须被用在其他语句或表达式的外部，而不能使用在if等代码块内部。原因之一是模块语法需要让 JS 能静态判断需要导出什么，正因为此，你只能在模块的顶级作用域使用 export与import。

3 @providesModule

由ReactNative提供支持

以上两种方式，到导入时均使用文件的相对路径，若是文件层次较深，则相对路径写起来容易搞错，读的时候也不易辨别。因此，ReactNative提供了一个关键字@providesModule，可以直接根据模块名称进行导入。

导出

在文件的顶部，嵌套一个多行注释，把@providesModule放在注释里。
ps: 带有@providesModule的多行注释，一定要是文件的第一个多行注释。

/**
 * @providesModule CommonComponent
 */

import {
    Dimensions
} from 'react-native';

export default class Common {
...
}

导入

// 以前需要这样
// import CommonComponent from './../Common/CommonComponent'

// 现在可以直接用类名
import CommonComponent from 'CommonComponent'

限制

只能在RN这种环境下用，不能用于前端的项目。

缺陷

容易造成命名重复，需要开发者规则命名规则，比如添加前缀、后缀。
无法根据引入模块的路径查找文件，可以根据模块名称进行全文搜索。

原理

RN在打包脚本的时候会检测该类型文件，并在整个项目文件查找到对应文件替换成对应的模块代码。打出来的包还是跟导入相对路径是一样的。

4 扩展

文件路径

以上的导入方式，均是使用文件路径导入文件的，文件路径的使用方式如下：

以 / 为起始，表示从根目录开始解析；
以 ./ 为起始，表示从当前目录开始解析；
以 ../ 为起始，表示从上级目录开始解析；

参考：

https://blog.csdn.net/crystal6918/article/details/74906757/
https://segmentfault.com/a/1190000004593603
https://www.jianshu.com/p/810abc8792be