“从 somelib 导入 {Something}”和“从 somelib 导入某物”之间的区别 React.js

Question

我不明白React.js 中“从 somelib导入{Something} ”和“从 somelib 导入某物”之间的区别。请问有人可以解释一下吗？

Answer 1

使用 ES6 模块时，您有两种类型的导出：

export Something
export default Something

它们之间的区别在于您如何导入它们。如果您有一个包含多个模块的单个文件，那么为每个模块命名并能够单独导入每个模块是有意义的，而不必导入文件的全部内容。

例如，假设您在一个文件中有 3 个模块，并且您将它们导出为export A; export B; export C;. 然后，您可以使用大括号导入语法导入其中任何一个。因此import {A, B}，例如将仅导入模块 A 和 B。

当您想从文件中导出组件而不是其他任何内容时，默认导出语法在 React 中常用。通过使用 导出某些内容export default A，您可以使用 导入该模块import X from ../file，其中 X 是别名并且可以是任何内容（但通常使用相同的名称来保持一致性）。

您可以在此处和此处阅读有关 ES6 导入和导出的更多信息。

Answer 2

这完全取决于库如何导出对象/函数。

请参阅以下案例：

考虑一个以这种方式导出的库：

export default func1() {...}
export func2() {...}
export func3() {...}

从上述库导入时：

语法 1

要导入func1我们会写

import x from 'lib'; // x is func1

语法 2

导入func2/ func3,

import {func3} from 'lib' // only func3 is imported

现在，如果你这样做

语法 3

import * as x from 'lib';

你会得到 x = { func2, func3, default: { func1 } }

没有默认导出的库：

export func1() {...}
export func2() {...}
export func3() {...}

导入语法：

语法 1

如果我们写

import x from 'lib'; // x is undefined, see Syntax 3

语法 2

导入func2/ func3,

import {func3} from 'lib' // only func3 is imported

语法 3

要全部导入，

import * as x from 'lib';

你会得到 x = { func2, func3, func1 }

现在考虑一个使用的库 module.exports

const func1 = function() { }
module.exports = func1;

导入时

import x from 'lib' // x = func1

现在考虑另一个库：

const func1 = function() { }
module.exports = { func1 };

现在要导入，func1您将执行以下操作：

import {func1} from 'lib';

因此，如果您希望导入完整的库（或其默认导出），您可以使用

import x from 'lib';

如果库导出一个对象并且您只想要该对象的某些键，则可以使用

import {key} from 'lib';

如果你想要所有的键作为另一个对象 x，你可以使用

import * as x from 'lib';

Answer 3

但还是有很大的区别:)

import {Something} from somelib -> 从库中导入特定的导出“Something”

import Something from somelib -> 仅导入默认导出并将别名命名为 Somthing。