react常用导入导出的方式

前言

在开发过程中，肯定都会使用导入导出的功能，有时候我们会搞混这几种方式到底有什么区别，今天我们就来细致的区分一下

导入导出方式

我们常用的导入导出方式分为两种，一种是基于es6的规范来定义的，一种是基于Common.js的规范来定义的。

基于es6规范

导入方式import,导出方式常见导出方式的有分别暴露 ，默认暴露，以及统一暴露。

导出方式

1.分别暴露 

export let name = "张三";
export let age = 18;
export let say = function () {
  console.log("hello");
};

2.统一暴露

let name = "张三";
let age = 18;
let height = 180;
let weight = 80;
export { name, age, height, weight };

3.默认暴露

export default {
  name: "张三",
  age: 18,
  say: function () {
    console.log("我是" + this.name + "，今年" + this.age + "岁");
  },
};

 导入方式

针对三种不同的导出方式，导入的方式也有所不同

1.针对统一暴露和分别暴露的方式导入（2种） 

//方式1 对象导出
import * as demo from "目标模块路径";
console.log(demo);//module对象，其内保存模块对外暴露的数据

//方式2 解构赋值
import { name } from "目标模块路径";
console.log(name);

2.针对默认暴露方式导入

import demo from "./demo.js";
console.log(demo); 

 3.如果我们有一个存放方法的文件夹，文件夹中有多个方法文件使用的是默认暴露，为了增加代码的可读性与代码冗余，建议在这个文件夹下创建一个index文件用于将各个方法文件中的方法一起暴露出去。比如：

 //utils文件夹 下存在 throttle.js文件与debounce.js文件且两个js文件都是通过 export default方式导出,建议在utils文件夹下新建一个index.js文件，并将throttle.js文件与debounce.js文件导入到index.js文件中然后再导出，可增加代码的可读性。

//导入并导出：
import {default as debounce} from './debounce';
import {default as throttle} from './debounce';

// 使用方法的文件导入这两个方法
import {debounce,throttle} from './utils';

基于Common.js规范

首先这两种方式是基于Common.js的规范来定义的，而这个规范是在Node.js中，因此这两种方式主要是在Node.js中使用

导出

module.exports和exports是对外共享模块中的方法和数据

1.module.exports 向外共享模块中的方法，module.exports实际上就是一个空对象，向外共享的也是这个空对象

module.exports = {
  name: "张三",
  sayName: () => {
    console.log("我是张三");
  },
};
module.exports = {
  name: "李四",
  sayName: () => {
    console.log("我是李四");
  },
};

2.exports这个方法和module.exports使用方式一致，是为了简化module.exports书写而存在的，如果模块中同时使用module.exports和exports向外共享数据 

module.exports.name = "张三";
module.exports.nickName = "李四";
module.exports.sayName = () => {
  console.log("我是张三");
};
module.exports.sayNickName = () => {
  console.log("我是李四");
};

总结：exports其实是module.exports的应用，在node.js中require只能访问到module.exports。

导入

require这个方法是用来导入模块向外共享的数据的，当我们在模块中使用module.exports或exports，就可以在想要使用这个模块的js文件中使用该方法导入，这个方法的参数就是模块所在的路径

//文件1
module.exports.sayName = () => {
  console.log("我是张三");
};
//文件2
const res = require("文件1的路径");
res.sayName()//我是张三

require与import的区别

1.调用时机 

• require是运行时调用，所以是可以放到文件中的任何地方
• import是编译时调用，所以必须放到文件的开头

2. 使用时针对导出方式

• require需要使用module.exports=fs 或者exports.fn='xxx'等导出方式
• impport需要使用export defalut 或者export 等导出方式