Rumah > hujung hadapan web > tutorial js > Pendakap Kerinting dalam Import Modul Tunggal ES6: Bila Perlu Menggunakannya dan Bila Tidak?

Pendakap Kerinting dalam Import Modul Tunggal ES6: Bila Perlu Menggunakannya dan Bila Tidak?

DDD
Lepaskan: 2024-12-25 21:22:15
asal
746 orang telah melayarinya

Curly Braces in ES6 Single Module Imports: When to Use Them and When Not To?

Bila Menggunakan Pendakap Kerinting untuk Import Modul Tunggal ES6

Dalam ES6, menggunakan pendakap kerinting untuk mengimport modul tunggal boleh memperkenalkan tingkah laku yang tidak dijangka. Untuk menjelaskan masa untuk menggunakan dan mengelakkan pendakap kerinting, mari kita periksa perbezaan antara eksport lalai dan dinamakan.

Eksport Lalai

Apabila mengimport modul tunggal tanpa pendakap kerinting, anda pada asasnya mengimport eksport lalai. Eksport lalai diisytiharkan sebagai:

export default <value>;
Salin selepas log masuk

Dalam contoh yang disediakan, initialState.js mengandungi eksport lalai untuk objek initialState. Oleh itu, anda boleh mengaksesnya tanpa pendakap kerinting:

import initialState from './todoInitialState';
Salin selepas log masuk

Eksport Dinamakan

Jika anda perlu mengimport nilai eksport tertentu, anda harus menggunakan pendakap kerinting. Eksport bernama diisytiharkan sebagai:

export const <identifier> = <value>;
Salin selepas log masuk

Dalam contoh TodoReducer.js, anda cuba mengakses todo bernama eksport:

import { todo } from './todoInitialState';
Salin selepas log masuk

Menggunakan Curly Braces vs. Mengelakkan Mereka

Peraturan biasa ialah menggunakan pendakap kerinting apabila mengimport eksport bernama dan elakkannya apabila mengimport eksport lalai. Berikut ialah pecahan ringkasan:

  • Gunakan pendakap kerinting:

    • Apabila mengimport eksport bernama khusus
  • Elakkan kerinting pendakap:

    • Apabila mengimport eksport lalai daripada modul dengan hanya satu eksport lalai
    • Apabila mengimport berbilang eksport daripada modul, tidak kira sama ada eksport lalai atau dinamakan eksport

Contoh

Pertimbangkan contoh berikut:

// A.js
export default MyComponent;
export const ChildComponent = () => {};
Salin selepas log masuk

Untuk mengimport eksport ini:

  • Eksport lalai (Komponen Saya):

    import MyComponent from './A';
    Salin selepas log masuk
  • Eksport bernama (Komponen Kanak-kanak):

    import { ChildComponent } from './A';
    Salin selepas log masuk

Oleh memahami perbezaan antara eksport lalai dan dinamakan, anda boleh menentukan dengan betul bila menggunakan pendakap kerinting untuk import modul tunggal dalam ES6.

Atas ialah kandungan terperinci Pendakap Kerinting dalam Import Modul Tunggal ES6: Bila Perlu Menggunakannya dan Bila Tidak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan