React ES6 模組
模組
JavaScript 模組允許您將程式碼分解成單獨的檔案。
這使得維護程式碼庫更加容易。
ES Modules 依賴於 import 和 export 語句。
匯出 (Export)
您可以從任何檔案中匯出函式或變數。
讓我們建立一個名為 person.js 的檔案，並填充我們想要匯出的內容。
有兩種型別的匯出：命名匯出 (Named) 和預設匯出 (Default)。
命名匯出 (Named Exports)
您可以透過兩種方式建立命名匯出。內聯單獨匯出，或在檔案底部一次性匯出。
示例
內聯單獨匯出
person.js
export const name = "Jesse"
export const age = 40
在底部一次性匯出
person.js
const name = "Jesse"
const age = 40
export { name, age }
預設匯出 (Default Exports)
讓我們建立另一個名為 message.js 的檔案，並使用它來演示預設匯出。
每個檔案只能有一個預設匯出。
示例
message.js
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
匯入 (Import)
您可以兩種方式將模組匯入到檔案中，具體取決於它們是命名匯出還是預設匯出。
命名匯出必須使用花括號進行解構。預設匯出則不需要。
