"ค่าเริ่มต้นการส่งออก" ทำอะไรใน JSX

ฉันต้องการถามว่าประโยคสุดท้ายมีความหมายว่าอย่างไรบ้าง (ส่งออกค่าเริ่มต้น HelloWorld;) แต่ฉันไม่พบบทเรียนใด ๆ เกี่ยวกับเรื่องนี้

// hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

การส่งออกเช่นexport default HelloWorld;และนำเข้าเช่นimport React from 'react'เป็นส่วนหนึ่งของระบบ ES6 โมดูล

โมดูลเป็นตัวหน่วยที่มีอยู่ที่สามารถเปิดเผยสินทรัพย์กับโมดูลอื่น ๆ ที่ใช้exportและสินทรัพย์ที่ได้มาจากโมดูลอื่น ๆ importที่ใช้

ในรหัสของคุณ:

import React from 'react'; // get the React object from the react module

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld; // expose the HelloWorld component to other modules

ใน ES6 มีการส่งออกสองชนิด:

การส่งออกที่มีชื่อ - ตัวอย่างเป็นชื่อการส่งออกที่มีชื่อของexport function func() {} funcโมดูลที่มีชื่อสามารถนำเข้าได้โดยใช้import { exportName } from 'module';.ในกรณีนี้ชื่อของการนำเข้าควรเป็นชื่อเดียวกับชื่อของการส่งออก ที่จะนำเข้า func import { func } from 'module';ในตัวอย่างคุณจะต้องใช้ สามารถมีการส่งออกที่ระบุชื่อหลายรายการในหนึ่งโมดูล

เริ่มต้นการส่งออก - import X from 'module'คุ้มค่าที่จะนำเข้ามาจากโมดูลถ้าคุณใช้คำสั่งนำเข้าง่าย X คือชื่อที่จะได้รับภายในเครื่องให้กับตัวแปรที่กำหนดให้มีค่าและไม่จำเป็นต้องตั้งชื่อเหมือนการส่งออกดั้งเดิม สามารถส่งออกเริ่มต้นได้เพียงหนึ่งรายการเท่านั้น

import defaultExport, { namedExport1, namedExport3, etc... } from 'module';โมดูลสามารถมีทั้งชื่อการส่งออกและการส่งออกที่เริ่มต้นและพวกเขาสามารถนำเข้าด้วยกันโดยใช้

export default จะใช้ในการส่งออกชั้นเดียวฟังก์ชั่นหรือดั้งเดิมจากไฟล์สคริปต์

การส่งออกสามารถเขียนเป็น

export default class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

คุณสามารถเขียนสิ่งนี้เป็นส่วนประกอบของฟังก์ชันได้เช่นกัน

export default const HelloWorld = () => (<p>Hello, world!</p>);

ใช้เพื่อนำเข้าฟังก์ชั่นนี้ในไฟล์สคริปต์อื่น

import HelloWorld from './HelloWorld';

คุณไม่จำเป็นต้องนำเข้าเนื่องจากHelloWorldคุณสามารถตั้งชื่อใด ๆ เนื่องจากเป็นการส่งออกเริ่มต้น

เล็กน้อยเกี่ยวกับการส่งออก

ดังที่ชื่อบอกว่ามันใช้เพื่อส่งออกฟังก์ชั่นวัตถุคลาสหรือนิพจน์จากไฟล์สคริปต์หรือโมดูล

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

สิ่งนี้สามารถนำเข้าและใช้เป็น

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

หรือ

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

เมื่อใช้การส่งออกเริ่มต้นสิ่งนี้จะง่ายกว่ามาก ไฟล์สคริปต์ส่งออกเพียงสิ่งเดียวเท่านั้น cube.js

export default function cube(x) {
  return x * x * x;
};

และใช้เป็น App.js

import Cube from 'cube';
console.log(Cube(3)); // 27

ในคำง่าย ๆ -

คำสั่งการส่งออกจะใช้เมื่อสร้างโมดูล JavaScript เพื่อส่งออกฟังก์ชั่นวัตถุหรือค่าดั้งเดิมจากโมดูลเพื่อให้สามารถใช้โปรแกรมอื่น ๆ ที่มีคำสั่งนำเข้า

นี่คือลิงค์สำหรับทำความเข้าใจที่ชัดเจน: MDN Web Docs

ความเข้าใจที่ง่ายที่สุดdefault exportคือ

Export เป็นคุณสมบัติของ ES6 ซึ่งใช้ในการส่งออกโมดูล (ไฟล์) และใช้ในโมดูลอื่น (ไฟล์)

ส่งออกเริ่มต้น:

1. default export เป็นข้อตกลงหากคุณต้องการส่งออกวัตถุเดียว (ตัวแปร, ฟังก์ชั่น, คลาส) จากไฟล์ (โมดูล)
2. อาจจะมีเพียงหนึ่งในการส่งออกเริ่มต้นต่อไฟล์ แต่ไม่ จำกัด เพียงการส่งออกหนึ่ง
3. เมื่อนำเข้าวัตถุส่งออกเริ่มต้นเราสามารถเปลี่ยนชื่อได้เช่นกัน

ส่งออกหรือตั้งชื่อส่งออก:

1. มันถูกใช้เพื่อส่งออกวัตถุ (ตัวแปรฟังก์ชั่น calss) ที่มีชื่อเดียวกัน

2. มันถูกใช้เพื่อส่งออกหลายวัตถุจากไฟล์เดียว

3. ไม่สามารถเปลี่ยนชื่อเมื่อนำเข้าในไฟล์อื่นจะต้องมีชื่อเดียวกันกับที่ใช้ในการส่งออก

ใน React, Vue และกรอบงานอื่น ๆ การส่งออกส่วนใหญ่ใช้เพื่อส่งออกส่วนประกอบที่นำกลับมาใช้ใหม่เพื่อสร้างแอพพลิเคชั่นแบบโมดูลาร์