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
网友评论