Блог

Например, в следующем:

 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
  

Какова связь между Router, Route, Switch и BrowserRouter ?Является ли это формой деструктурирования?

Если это так, я думал, что деструктурирование было выполнено с использованием следующего синтаксиса:

   import React, { Fragment } from 'react'

  function App() {
    return (
      <Fragment>
       //...
      </Fragment>
    
    );
  }
  

Это очень похоже на деструктурирование, хотя и не совсем то же самое. as Ключевое слово является специальным для случаев, когда вы хотите импортировать именованный экспорт библиотеки под другим именем. (Подробнее об именованном экспорте см. Ниже)

Поэтому, когда разработчик библиотеки экспортирует функции или что-то еще из своей библиотеки, они пишут что-то вроде:

 
export const someFunc = () => {};
export const someOtherFunc = () => {};
export const someThirdFunc = () => {};

  

Это называется «именованный экспорт». Это то, что вы импортируете, когда пишете что-то вроде

 import { someFunc } from 'some-library';
  

Итак, что as это позволяет вам импортировать этот именованный экспорт под новым выбранным вами именем.

 import { someFunc as somePreferredName, someOtherFunc as someOtherPreferredName, someThirdFunc } from 'some-library';
  

Вы также можете импортировать каждый именованный импорт в один объект следующим образом:

 import * as someLibrary from 'some-library';
  

Затем вы можете сделать что-то вроде someLibrary.someFunc() ;

Или вы можете импортировать «экспорт по умолчанию». Что именно содержит экспорт по умолчанию, определяется автором библиотеки, но обычно экспорт по умолчанию эквивалентен синтаксису в предыдущем разделе этого ответа.

Итак, в случае React две строки ниже эквивалентны:

 // import React from 'react';
import * as React from 'react'; // Imports every named export of 'react' and put it into an object named React.
  

Сведение всего этого воедино

Важно отметить, что React, в частности, требует, чтобы вы импортировали экспорт по умолчанию. Это не импорт ES6, это требование React версии 16.x. Для других пакетов вы можете импортировать только часть, и она будет функционировать по назначению.

Lodash — более простой пример. Для Lodash импорт экспорта по умолчанию эквивалентен импорту всего.

 // Import the named export "debounce" from 'lodash' into a variable of the same name
import { debounce } from 'lodash';



// Imports the named export "debounce" from 'lodash' into a variable of your chosen name
import { debounce as anyNameYouWant } from 'lodash' 



// Imports the default export of 'lodash' into the object named anyNameYouWant
import anyNameYouWant, { debounce } from 'lodash'; // And then additionally, imports debounce into a variable of the same name

  

Обратите внимание, что при импорте по умолчанию нет ключевого слова «as». Они не называются экспортами, поэтому при их импорте вы всегда выбираете имя. Это то, что as позволяет вам делать, но для именованного экспорта.

Я ни в коем случае не эксперт по Javascript, но я думаю, что для импорта требуется более одного модуля.

Пример, который я нашел из https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import :

 import defaultExport from "module-name";

import * as name from "module-name";

import { export1 } from "module-name";

import { export1 as alias1 } from "module-name";

import { export1 , export2 } from "module-name";

import { foo , bar } from "module-name/path/to/specific/un-exported/file";

import { export1 , export2 as alias2 , [...] } from "module-name";

import defaultExport, { export1 [ , [...] ] } from "module-name";

import defaultExport, * as name from "module-name";

import "module-name";

var promise = import("module-name");