7.react 导入中的 as / 2. export和export default的区别

react

1. react 导入中的 as

import React from 'react'  // 只导入 是 React。

import * as React from 'react'  //(* ===所有),导入所有,并命名为 React。

import hash as Router from 'react'   // 导入hash,并命名为 Router。

expor default useStore as useAppStore  // 导出 useStore 并命名为 useAppStore

2. export和export default的区别

1. export与export default均可用于导出常量、函数、文件、模块

2. 你可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块)名 + from + "./地址" 的方式,将其导入,以便能够对其进行使用

3. 在一个文件或模块中,export、import可以有多个,export default仅有一个

4. 通过export方式导出多个内容的时候,在导入时要加{ },如果只有一个也可以不解构,export default则不需要

其实很多时候export与export default可以实现同样的目的,只是用法有些区别。注意第四条,通过export方式导出导出多个内容的时候,在导入时要加{ },export default则不需要。

使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名(也就是说:引入的变量名可以和导出的不一致,只要路径正确就可以引入)。

export default  :

import '../css/myApp.css';

import React, {Component} from 'react';

// import { Link } from 'react-router-dom';

import {connect} from 'react-redux';

// import {bindActionCreators} from 'redux';

// import * as actioncreators from '../../actioncreators/actioncreate';

import actions from '../../store/action';

class myApp extends Component {

constructor(props) {

super(props);

this.state = {

};

};

render() {

return (

<div className="box_1">

</div>

)

}

};

export default connect(state => state, actions)(myApp);
/*-------------------------引入的时候--------------------------*/
import App from "../myApp/myApp.js" // 名称可以不同,只要路径正确就可以引入
import myApp as App from "../myApp/myApp.js" // 引入,并重新命名,对 export 导出的同样适用

export :

export {

useStore,

useAction as useAppAction

}

/*--------------------------引入的时候--------------------------*/

import {useAppAction} from "store/appStore/appStore"; // 引入的名称必须和导出的一样

以上是 7.react 导入中的 as / 2. export和export default的区别 的全部内容, 来源链接: utcz.com/z/381688.html

回到顶部