javascript - "export default" ใน JSX ทำอะไร?

ฉันอยากถามว่าสถานสุดท้ายหมายถึงอะไรและทำงานอย่างไร (export default HelloWorld;) แต่ฉันไม่สามารถหาบทเรียนเกี่ยวกับมันได้

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

คำตอบ #1

การส่งออกเช่น 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';.

คำตอบ #2

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

การส่งออกยังสามารถเขียนได้ว่า

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

คุณก็สามารถเขียนสิ่งนี้เป็นคอมโพเนนต์ฟังก์ชันแบบ

export default function HelloWorld() {
  return <p>Hello, world!</p>
}

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

import HelloWorld from './HelloWorld';

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

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

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

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

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

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

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

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

คำตอบ #3

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

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

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

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

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

มันถูกใช้เพื่อส่งออกวัตถุ (ตัวแปร, ฟังก์ชัน, คลาส) ที่มีชื่อเดียวกัน
มันถูกใช้เพื่อส่งออกหลายวัตถุจากหนึ่งไฟล์
ไม่สามารถเปลี่ยนชื่อเมื่อทำการนำเข้าในไฟล์อื่นได้ ต้องมีชื่อเดียวกับที่ใช้ในการส่งออก แต่เราสามารถสร้างชื่อแทนของมันได้โดยใช้ตัวดำเนินการ as

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

คำตอบ #4

พูดง่าย ๆ -

คำสั่ง export ใช้เมื่อสร้างโมดูล JavaScript เพื่อส่งออกฟังก์ชัน วัตถุ หรือค่าพื้นฐาน จากโมดูลเพื่อให้สามารถใช้โดยโปรแกรมอื่นๆ ผ่านคำสั่ง import