javascript - React 导入中的点表示法

Question

我看到许多 react 框架在导入时推荐点符号。
例如而不是

import Y from 'X/Y';  
<Y />  

他们会使用:

import X from 'X';  
<X.Y />

根据我的测试，它们都有效。
我的问题是，如果有的话，有哪些差异？
特别是如果您只需要使用 Y，那么第二个表示法是否会导入不必要的数据，因为您不需要 X？当您同时使用 X 和 Y 而不仅仅是 Y 时，您是否只使用第二种表示法？

Answer 1

它们并不相同，但有时可能会产生相同的结果。

import Y from 'X/Y'

这表示在路径 X/Y 处导入文件，并将默认导出存储为本地常量 Y。 X 可能是已安装的 npm 模块，在这种情况下，您需要深入了解其目录结构以查找特定文件。

import X from 'X'

这表示导入路径 X 处的文件并将默认导出存储为本地常量 X。它导入完全不同的文件。

现在，如果 X 类似于:

import Y from './Y'
export default {
  other: { stuff: true },
  Y,
}

然后您就可以轻松访问X.Y。但不能保证它会以这种方式实现。

当您导入模块而不深入研究它时，您将导入模块作者打算公开的结构。这可能与模块实现的目录结构有很大不同。理论上，如果您导入内部文件，根本不更改导出接口(interface)的内部重构可能会破坏您的代码。

这就是为什么您应该遵循模块有关如何导入它的说明。

<小时/>

现在假设这是您的模块:

export const Y = 'I am Y'
export default 'I am the default export of X'

然后你可以像这样导入:

import X from 'X'   // X === 'I am the default export of X'
import {Y} from 'X' // Y === 'I am Y' 

console.log(X.Y)    // undefined. Y is not a property of the default export.