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?pathimport {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...

總結

以上是生活随笔為你收集整理的export和export default的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。