Javascript 什么是'；导入为'；？

例如，在以下情况下：

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

路由器、路由、交换机和浏览器路由器之间的关系是什么？这是一种解构形式吗

如果是这样，我认为分解是使用以下语法完成的：

  import React, { Fragment } from 'react'

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

import React，{Fragment}来自“React”
函数App（）{
返回(
//...
);
}

我无论如何都不是Javascript专家，但我认为这需要导入多个模块

我从中找到的示例：

它与解构非常相似，但并不完全相同。

as

关键字是一个特殊的关键字，用于在需要以不同名称导入库的命名导出时使用。（有关命名导出的详细信息，请参见下文）

---

因此，当库开发人员从库中导出函数或其他内容时，他们会编写如下内容：

导出常量someFunc=（）=>{}；
export const someOtherFunc=（）=>{}；
导出常量someThirdFunc=（）=>{}；

这些被称为“命名导出”。它们是您在编写类似

从“某个库”导入{someFunc}；

因此，

作为

所做的是，它允许您以您选择的新名称导入命名的导出

import{someFunc作为somePreferredName，someOtherFunc作为someOtherPreferredName，someThirdFunc}从“some库”导入；

---

还可以将每个命名导入导入到单个对象中，如下所示：

import*作为来自“某个库”的某个库；

然后您可以执行类似于

someLibrary.someFunc（）

---

或者您可以导入“默认导出”。默认导出包含的内容由库的作者确定，但默认导出通常与本答案上一节中的语法等效

因此，在React的情况下，以下两行是等效的：

//从“React”导入React；
从“React”导入*作为React；//导入“react”的每个命名导出，并将其放入名为react的对象中。

---

把这一切结合起来 请务必注意，React特别要求您导入默认导出。这不是ES6导入，而是REACTV16.x需求。对于其他软件包，您可以只导入一件，它将按预期运行

Lodash是一个更简单的例子。对于Lodash，导入默认导出相当于导入所有内容

//将命名的导出“debounce”从“lodash”导入到同名变量中
从“lodash”导入{debounce}；
//将“lodash”中的命名导出“debounce”导入到所选名称的变量中
从“lodash”导入{debounce as anyNameYouWant}
//将“lodash”的默认导出导入到名为anyNameYouWant的对象中
从“lodash”导入所需的任意名称，{debounce}；//然后，将debounce导入到同名变量中

---

请注意，默认导入没有“as”关键字。它们不是命名的导出，因此在导入它们时，总是选择名称。这就是

as

允许您做的事情，但是对于命名的导出。

您这里真的有一切：@Jayce444这真的一点帮助都没有。我记得我被很多事情弄糊涂了，现在我知道我当时没有。但是，OP展示了一个例子，在as的右边有多个名称：

import{BrowserRouter as Router，Route，Switch}from'react Router dom'

。这是怎么回事？@jfriend00我正要问同样的问题。我还想指出BrowserRouter.Router不工作，而React.Fragment工作。路由器、路由、交换机作为组件也有不同的用途，所以它们中的每一个都是单独命名的导出。我更新了更多的例子，但如果这不能回答你的问题，请告诉我@kennsorr决定因素是库作者如何导出内容以及您如何导入内容。当您导入React时，这被称为“默认导出”。在React的情况下，默认导出将包含

React

对象内部的每个命名导出-但这不一定是默认导出对每个库的工作方式。我认为调用此解构是一个错误，会混淆问题。这是名为import syntax的，您在某种程度上对模块名称空间对象进行了解构，但由于绑定是活动的，因此它不会像解构那样在导入时捕获一个单数值。@Slbox-我认为您应该将OP询问的特定示例称为非法语法。现在，你似乎没有回答他们直接提出的问题，因为你没有说任何关于他们所问的实际例子的事情。

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");