từ khóa mặc định trong es6 xuất nhập khẩu

Question

Tôi có hai tập tin, một trong những đầu tiên là todoHelper.js

nó có export const addTodo = (list, item) => [...list, item]

sau này tôi muốn sử dụng addTodo trong tập tin khác, tôi chỉ đơn giản là làm import {addTodo} from './todoHelpers'

Nhưng tôi cũng thấy những người làm mặc định xuất thay vì chỉ xuất. Sự khác biệt là gì?

Answer 1

Bạn có thể chỉ có một mặc định xuất khẩu cho mỗi tập tin và do đó khi bạn làm mặc định xuất khẩu như

export default AddTodo = (list, item) => [...list, item] 

Bạn có thể nhập nó như

import MyAddTodo from './todoHelpers' 

Kể từ babel biết rằng bạn đang cố gắng truy cập vào thành phần mặc định, bạn có thể truy cập nó trong tệp theo bất kỳ tên nào

Giả sử bạn làm

export const AddTodo = (list, item) => [...list, item] 

Bạn có thể có nhiều lần xuất như vậy trong quý vị nộp như

const xuất khẩu AddTodo = (danh sách, mục) => [... danh sách, item] xuất khẩu const DeleteTodo = (danh sách, mục) => [... danh sách, item]

và khi bạn nhập bạn sẽ cần phải destructure họ như

import {AddTodo, DeleteTodo}from './todoHelpers' 

Bây giờ kể từ khi bạn có nhiều lần xuất như vậy babel sẽ không biết được thành phần bạn đang tyring để truy cập nếu bạn truy cập nếu theo tên khác như

import {MyAddTodo, MyDeleteTodo}from './todoHelpers' 

Nếu bạn muốn làm điều này bạn sẽ phải nhập khẩu chúng như nó là gì và họ thay đổi tên của họ như

import {AddTodo as MyAddTodo, DeleteTodo as MyDeleteTodo}from './todoHelpers' 

Vì vậy, khi thực hành nói chung bạn sẽ default export thành phần chính và phần còn lại bạn có thể có xuất như bình thường hoặc khi bạn chỉ có một thành phần mà bạn cần xuất từ ​​một tệp thì bạn có thể chọn bất cứ thứ gì bạn muốn nhưng cách tốt nhất sẽ là export theo mặc định.

Answer 2

Sử dụng từ khóa mặc định với xuất khẩu cho chúng ta sự tự do để nhập khẩu với tên bí danh

export default k // in file my.js 

thể được nhập khẩu với tên bí danh 'b'

import b from 'my.js'