ES6 단일 모듈 가져오기의 중괄호: 언제 사용하고 언제 사용하지 않습니까?

ES6 단일 모듈 가져오기에 중괄호를 사용하는 경우

ES6에서 단일 모듈을 가져오기 위해 중괄호를 사용하면 예기치 않은 동작이 발생할 수 있습니다. 중괄호를 사용하고 방지하는 시기를 명확히 하기 위해 기본 내보내기와 명명된 내보내기의 차이점을 살펴보겠습니다.

기본 내보내기

중괄호 없이 단일 모듈을 가져올 때 본질적으로 기본 내보내기를 가져옵니다. 기본 내보내기는 다음과 같이 선언됩니다.

export default <value>;

제공된 예제에서initialState.js에는initialState객체에 대한 기본 내보내기가 포함되어 있습니다. 따라서 중괄호 없이도 액세스할 수 있습니다.

import initialState from './todoInitialState';

Named 내보내기

내보낸 특정 값을 가져와야 하는 경우 중괄호를 사용해야 합니다. 명명된 내보내기는 다음과 같이 선언됩니다.

export const <identifier> = <value>;

TodoReducer.js 예에서는 내보내기라는 이름의 할일에 액세스하려고 합니다.

import { todo } from './todoInitialState';

중괄호 사용과 이를 피하세요

어림짐작으로 중괄호를 사용하는 것은 다음과 같습니다. 명명된 내보내기를 가져오고 기본 내보내기를 가져올 때 이를 피하세요. 요약된 분석은 다음과 같습니다.

• 중괄호 사용:

  • export라는 특정 이름을 가져올 때

• 곱슬머리는 피하세요 중괄호:

  • 단 하나의 기본 내보내기가 있는 모듈에서 기본 내보내기를 가져올 때
  • 기본 또는 이름 지정 여부에 관계없이 모듈에서 여러 내보내기를 가져올 때 내보내기

예

다음 예를 고려하세요.

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

이를 가져오려면 내보내기:

• 기본 내보내기(MyComponent):

  import MyComponent from './A';

• 이름이 지정된 내보내기 (ChildComponent):

  import { ChildComponent } from './A';

기본 내보내기와 명명된 내보내기의 차이점을 이해하면 ES6에서 단일 모듈 가져오기에 중괄호를 사용해야 하는 시기를 올바르게 결정할 수 있습니다.

위 내용은 ES6 단일 모듈 가져오기의 중괄호: 언제 사용하고 언제 사용하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!