我看到许多 react 框架在导入时推荐点符号。
例如而不是
import Y from 'X/Y';
<Y />
他们会使用:
import X from 'X';
<X.Y />
根据我的测试,它们都有效。
我的问题是,如果有的话,有哪些差异?
特别是如果您只需要使用 Y
,那么第二个表示法是否会导入不必要的数据,因为您不需要 X?当您同时使用 X 和 Y 而不仅仅是 Y 时,您是否只使用第二种表示法?
最佳答案
它们并不相同,但有时可能会产生相同的结果。
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.
关于javascript - React 导入中的点表示法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60195944/