Question

我不明白React.js中“i mport {Something} from somelib ”和“从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导入和更多内容的更多信息。导出here和here.

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

但是有一个巨大的不同：）

从somelib导入{Something} - ＆gt;从库中导入特定的导出“Something”

从somelib导入一些东西 - ＆gt;仅导入默认导出并将别名命名为Somthing。