export和export default的区别

48次阅读

共计 1269 个字符,预计需要花费 4 分钟才能阅读完成。

es6 中 export 和 export default 的区别

export 与 export default 均可用于导出常量、函数、文件、模块;
你可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块) 名的方式,将其导入,以便能够对其进行使用;
在一个文件或模块中,export、import 可以有多个,export default 仅有一个;
通过 export 方式导出,在导入时要加 {},export default 则不需要;
其实很多时候 export 与 export default 可以实现同样的目的,只是用法有些区别。注意第四条,通过 export 方式导出,在导入时要加 {},export default 则不需要。使用 export default 命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

React 中使用 export 导出类可以有两种方法
1. export default classname
这种导出方式与 export default class classname extends React.class 相同
在其他文件中引用时采取如下方式
import classname form path

例如:
Com.js
class Welcome extends React.Component{
render(){
return <h1> hello,{this.props.name}</h1>
}
}

function App(){
return (
<div>
<Welcome name=”Sara”/>
<Welcome nmae=”Peng”/>
</div>
);
}

export default App;

index.js
import App from ‘./components/Com’;
const element=<App/>;
ReactDOM.render(element, document.getElementById(‘root’));

2. export {classname1,classname2}
在其他文件中引用时采用如下方式
import {classname1,classname2} from path

import {classname1} // 注意引用一个类时也要加上 {}

例如:
class Welcome extends React.Component{
render(){
return <h1> hello,{this.props.name}</h1>
}
}

function App(){
return (
<div>
<Welcome name=”Sara”/>
<Welcome nmae=”Peng”/>
</div>
);
}
export {Welcome,App};

index.js
import {App} from ‘./components/Com’;

const element=<App/>;
ReactDOM.render(element, document.getElementById(‘root’));

 
作者:ZhaoYingChao88 原文:https://blog.csdn.net/ZYC8888…

正文完
 0