ReactNative—常用的导入导出方式

96
素月某某
2019.01.08 21:28 字数 919

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

技术
Web note ad 1