ES6 引入模块化概念之后,JavaScript 便成了新时代浪客。
在使用过程中,发现一些问题存在,或者说不理解的地方,我在此做一个汇总。
并不涉及
commonjs
,只针对于import
与export
以 React 为例
导出一个函数组件,常规写法:
export default function App() {
return (
<div>
<h1>APP</h1>
</div>
)
}
这里我可以选择将函数名抹掉,没有问题。
export default function () {
return (
<div>
<h1>APP</h1>
</div>
)
}
这种写法与前者相比,可以观察到的一个不同点就在浏览器 React 开发者工具当中,组件名成了 default
。
其次,默认导出通常写在文件末尾处,方便观察,这是一条最佳实践,所以需要改写一下。
function App() {
return (
<div>
<h1>APP</h1>
</div>
)
}
export default App
早期我的写法,更多时候是第一段示例当中那样,将导出与函数定义写成一行,不为别的,就是看着代码行数少。后续阅读一些源码时,发现更多是将默认导出写在最后,于是选择了这种写法,跟着大佬走。
继续往下探索
只探讨当中出现的问题,而不是实用性
接着上面的示例继续,若是追求精简,改写为箭头函数。
const App = () => (
<div>
<h1>APP</h1>
</div>
)
export default App
极致写法
export default () => (
<div>
<h1>APP</h1>
</div>
)
可是如果写成这样,就不行了。
export default const App = () => (
<div>
<h1>APP</h1>
</div>
)
事实上,如果将 default
给去除,这条导出又能行了,加上前面成功的默认导出,这种表现使错误更加迷惑不解,我在论坛当中找到了这个答案。
https://stackoverflow.com/questions/36261225/why-is-export-default-const-invalid
首先需要清楚,每一个文件只能一个默认导出,想要默认导出多个数据,则需要使用对象。
对于变量声明,我们通常一条一条写,不过是可以使用逗号分隔,一次声明多个变量
const a = 1
const b = 2
const c = 3,
d = 4
如果真的声明多个变量,默认导出的规矩就被破了。为了防止这种情况的发生,export default
与变量声明不能存在同一行。
export
没问题,它是可以接受多个导出的。
再看另一个无法生效的场景
import store from "./store"
// bad
export store
import store from "./store"
export default store
前者为什么会无法生效,讲道理的话,它好歹是另一个文件当中导入的,通过名称导出不是正好吗?
换一个场景,能够更好的体现这一点。
const store = 10
// bad
export store
要是一个对象也就罢了,可是如果是一个简单类型怎么办呢?另一边就没办法接收了
export 10
对于简单类型,只能以对象,或者默认形式导出
const store = 10
export {
store
}
对于默认导入的数据,只能再次默认导出,否则加上 {}
,这能加上一个对应的 key 值。
我在浏览一些库的时候,发现了这样的一种写法
export { default as store } from "./store"
这是一种组合写法,导入目标文件默认导出的同时,给其取一个名,并在当前文件导出,也就是中转站玩法,不带任何二次处理的
import store from "./store"
export { store }
发现还有些问题没有说完,于是出了该续篇