export default 和 export的区别

1.export 可以导出多个对象，export default只能导出一个

export default示例：

// a.js
export default axios

// b.js
import axioslong from a.js // 这是简写
import {default as axioslong} from a.js // 这是正常写法
//注意 1.引入export defult导出的内容无需使用{}
       2.这里的axiosLong可以是任意的名字，不用和default之后的名字保持一致

export示例：

// a.js
// 第一种写法
export const str = lx
export const fn = () => {}

// 第二种写法
const str = lx
const fn = () => {}
export { str, fn }



// b.js
import { str, fn } from a.js 
//注意 1.引入export导出的内容要使用{}
       2.导出的名字和引入的名字要保持一致

2.export default 后面不能跟 const var let会报错 ，export后面可以跟。

错误写法：

export default const footer = (
  <h1>
    <span>我是footer</span>
  </h1>
)

正确写法：

// 导出函数
第一种写法：
export default (params) => {}

第二种写法：
const footer = (params) => {}
export default footer

3.export 和 export default可以混用

// a.js
export const str = lx
export default axios

// b.js
import { str as str2 }, axios from a.js // 可以使用as给{}里的变量起别名

ReactDOM.render(
  str2,
  document.getElementById(root)
);

4.使用export default导出多个js,引用的的时候需要挨个引入不同的js名字,这时我们可以在文件夹下新建一个index.js，将所有的js统一导出。例如

在index.js写入以下代码 ：

export { default as getQuery } from ./js/getQuery
export { default as getUserInfo } from ./js/getUserInfo
export { default as userIsLogin } from ./js/userIsLogin
// 这种写法相当于先import再export导出
import {default as getQuery} from ./js/getQuery‘
export getQuery

引用：

import { userIsLogin, getUserInfo } from @common