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...