“Dışa aktarma varsayılanı” JSX'te ne yapar?

Son cümlenin ne anlama geldiğini ve ne anlama geldiğini sormak istiyorum (varsayılan HelloWorld'ü dışa aktar); ancak bununla ilgili herhangi bir öğretici bulamıyorum.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

Gibi ihracatexport default HelloWorld; ve ithalat , örneğin ES6 modülleri sisteminin birimport React from 'react' parçasıdır .

Bir modül, varlıklarını kullanarak diğer modüllere maruz bırakabilen exportve kullanarak diğer modüllerden varlık elde edebilen bağımsız bir birimdir import.

Kodunuzda:

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'da iki tür ihracat vardır:

Adlandırılmış dışa aktarmalar - örneğin export function func() {}, adıyla adlandırılmış bir dışa aktarmadır func. Adlandırılmış modüller kullanılarak içe aktarılabilir import { exportName } from 'module';.Bu durumda, içe aktarmanın adı dışa aktarma adıyla aynı olmalıdır. Örnekteki fontu almak için kullanmanız gerekir import { func } from 'module';. Bir modülde birden fazla adlandırılmış dışa aktarma olabilir.

Varsayılan dışa aktarma - basit içe aktarma ifadesini kullanırsanız, modülden içe aktarılacak değerdir import X from 'module'. X, değeri içermek üzere atanan değişkene yerel olarak verilecek addır ve başlangıç ​​kaynağı gibi adlandırılması gerekmez. Yalnızca bir varsayılan dışa aktarma olabilir.

Bir modül hem adlandırılmış dışa aktarma hem de varsayılan dışa aktarma içerebilir ve kullanılarak birlikte içe aktarılabilir import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

export default bir komut dosyasından tek bir sınıf, işlev veya ilkel dışa aktarmak için kullanılır.

İhracat ayrıca şu şekilde de yazılabilir:

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

Bunu, aşağıdaki gibi bir işlev bileşeni olarak da yazabilirsiniz

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

Bu, bu işlevi başka bir komut dosyasına almak için kullanılır

import HelloWorld from './HelloWorld';

HelloWorldVarsayılan bir dışa aktarma olduğu için herhangi bir ad verebileceğiniz için içe aktarmanız gerekmez.

İhracat hakkında biraz

Adından da anlaşılacağı gibi, komut dosyaları veya modüllerinden işlevleri, nesneleri, sınıfları veya ifadeleri dışa aktarmak için kullanılır

Utiliites.js

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

Bu, şu şekilde içe aktarılabilir ve kullanılabilir:

App.js

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

Veya

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

Dışa aktarma varsayılanı kullanıldığında, bu çok daha basittir. Komut dosyaları yalnızca bir şeyi dışa aktarır. cube.js

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

ve App.js olarak kullanılır

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

Basit Kelimelerle -

Export deyimi, işlevler, nesneler veya ilkel değerleri modülden vermek için JavaScript modülleri oluştururken kullanılır, böylece import deyimi ile diğer programlar tarafından kullanılabilirler.

Anlaşılması kolay bir bağlantı: MDN Web Dokümanları

İçin basit anlama default exportDİR

Export ES6'nın bir modülü (dosyayı) dışa aktarmak ve başka bir modülde (dosya) kullanmak için kullanılan özelliğidir.

Varsayılan Dışa Aktarma:

1. default export dosyadan (modül) yalnızca bir nesneyi (değişken, işlev, sınıf) vermek istiyorsanız kuraldır.
2. Dosya başına yalnızca bir varsayılan dışa aktarma olabilir, ancak yalnızca bir dışa aktarmayla sınırlı değildir .
3. Varsayılan dışa aktarılan nesneyi içe aktarırken onu da yeniden adlandırabiliriz.

İhracat veya Adlandırılmış İhracat:

1. Nesneyi (değişken, işlev, calss) aynı adla dışa aktarmak için kullanılır.

2. Bir dosyadan birden fazla nesne dışa aktarmak için kullanılır.

3. Başka bir dosyaya içe aktarırken yeniden adlandırılamaz, dışa aktarmak için kullanılanla aynı ada sahip olmalıdır.

React, Vue ve diğer birçok çerçevede Dışa Aktarma, çoğunlukla modüler tabanlı uygulamalar yapmak için yeniden kullanılabilir bileşenleri dışa aktarmak için kullanılır.