export和export default的区别

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…