一、 ES6的模組化的基本規則或特點

• 每一個模組只加載一次， 每一個JS只執行一次， 如果下次再去載入同目錄下同檔案，直接從記憶體中讀取。 一個模組就是一個單例，或者說就是一個物件；
• 每一個模組內宣告的變數都是區域性變數， 不會汙染全域性作用域
• 模組內部的變數或者函式可以通過export匯出
• 一個模組可以匯入別的模組

https://es6.ruanyifeng.com/

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'));