Những gì mà xuất khẩu mặc định của Wap làm gì trong JSX?

Tôi muốn hỏi câu cuối cùng có nghĩa là gì và làm gì (xuất mặc định HelloWorld;) nhưng tôi không thể tìm thấy bất kỳ hướng dẫn nào về nó.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Xuất like export default HelloWorld;và nhập , chẳng hạn như import React from 'react'là một phần của hệ thống mô-đun ES6 .

Mô-đun là một đơn vị độc lập có thể hiển thị tài sản cho các mô-đun khác bằng cách sử dụng exportvà có được tài sản từ các mô-đun khác bằng cách sử dụng import.

Trong mã của bạn:

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

Trong ES6 có hai loại hàng xuất khẩu:

Xuất khẩu được đặt tên - ví dụ export function func() {}là xuất khẩu có tên với tên của func. Các mô-đun được đặt tên có thể được nhập bằng cách sử dụng import { exportName } from 'module';.Trong trường hợp này, tên của lần nhập phải giống với tên của xuất. Để nhập func trong ví dụ, bạn sẽ phải sử dụng import { func } from 'module';. Có thể có nhiều xuất khẩu được đặt tên trong một mô-đun.

Xuất mặc định - là giá trị sẽ được nhập từ mô-đun, nếu bạn sử dụng câu lệnh nhập đơn giản import X from 'module'. X là tên sẽ được đặt cục bộ cho biến được gán để chứa giá trị và nó không phải được đặt tên giống như xuất khẩu gốc. Chỉ có thể xuất một mặc định.

Một mô-đun có thể chứa cả xuất khẩu được đặt tên và xuất khẩu mặc định và chúng có thể được nhập cùng nhau bằng cách sử dụng import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

export default được sử dụng để xuất một lớp, hàm hoặc nguyên thủy từ tệp script.

Xuất khẩu cũng có thể được viết là

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

Bạn cũng có thể viết nó như là một thành phần chức năng như

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

Điều này được sử dụng để nhập chức năng này trong một tập tin kịch bản khác

import HelloWorld from './HelloWorld';

Bạn không nhất thiết phải nhập nó vì HelloWorldbạn có thể đặt cho nó bất kỳ tên nào vì đây là xuất khẩu mặc định

Một chút về xuất khẩu

Như tên đã nói, nó được sử dụng để xuất các hàm, đối tượng, lớp hoặc biểu thức từ tệp tập lệnh hoặc mô-đun

Utiliites.js

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

Điều này có thể được nhập khẩu và sử dụng như

App.js

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

Hoặc là

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

Khi xuất mặc định được sử dụng, điều này đơn giản hơn nhiều. Tập tin script chỉ xuất một thứ. cube.js

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

và được sử dụng như App.js

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

Nói một cách đơn giản -

Câu lệnh xuất được sử dụng khi tạo các mô-đun JavaScript để xuất các hàm, đối tượng hoặc giá trị nguyên thủy từ mô-đun để các chương trình khác có thể sử dụng chúng với câu lệnh nhập.

Đây là một liên kết để hiểu rõ hơn: Tài liệu web MDN

Hiểu đơn giản nhất default exportlà

Export là tính năng của ES6 được sử dụng để Xuất mô-đun (tệp) và sử dụng nó trong một số mô-đun (tệp) khác.

Xuất mặc định:

1. default export là quy ước nếu bạn muốn chỉ xuất một đối tượng (biến, hàm, lớp) từ tệp (mô-đun).
2. Có thể chỉ có một lần xuất mặc định cho mỗi tệp, nhưng không bị giới hạn chỉ một lần xuất .
3. Khi nhập đối tượng xuất mặc định, chúng ta cũng có thể đổi tên nó.

Xuất khẩu hoặc đặt tên xuất khẩu:

1. Nó được sử dụng để xuất đối tượng (biến, hàm, calss) có cùng tên.

2. Nó được sử dụng để xuất nhiều đối tượng từ một tệp.

3. Nó không thể được đổi tên khi nhập vào tệp khác, nó phải có cùng tên được sử dụng để xuất nó.

Trong React, Vue và nhiều khung công tác khác, phần lớn Xuất khẩu được sử dụng để xuất các thành phần có thể tái sử dụng để tạo các ứng dụng dựa trên mô-đun.