Javascript default import vs named import

在写React Native代码时,遇到了一个问题.

在一个组件中用import {React, Component} from 'react';导入React依赖时,老是提示undefined is not a function(evaluating '_react.React.createElement').

由于调试起来特别不方便,我们又不能从错误栈中得到什么有用的信息,所以搞得我有点懵.捣鼓了好长时间没解决.

后来,发现React Native中自带的index.android.js中,导入React依赖用的是下面这条语句:import React, {Component} from 'react';

就想碰碰运气,修改了一下,结果竟然真成了!!!!

你们能想象当时我心中一万个草泥马奔腾而过的场景吗?!

于是,就查了查这两者到底有什么区别.

下面是从Stack Overflow上面得到的答案.

感觉default import和named import翻译成中文有点难翻译,索性就不翻译了.直接用英文昵称得了.

default import

下面这种形式就是default import:
import A from './A'

只有A.js中,包含了一条export default 语句时,它才能生效.比如,export default 42.

不管你是从A.js中import什么,比如:
import A from './A'
import MyA from './A'
import Something from './A'

它们对应的都是解析成导入A.js中的export default对应的对象.

named import

named import是下面这种形式:
import {A} from './A'

只有当A.js中包含了一条export A的语句时,它才会生效.比如:
export const A = 42

在named import,括号中的名字很关键!

如果A.js中只有export const A = 42这条语句,那下面的语句都将不会生效:

**
import {MyA} from './A';
import {Something} from './A';
**

为了让上面的那两条语句生效,你需要在A.js中添加如下内容:

**
export const MyA = 42;
export const Something = 42;
**

结合

一个js文件中,只能有一个default export语句,但是可以有多个named export .例如,如果你的A.js内容如下:
export default 42
export const myA = 43
export const Something = 44

那你可以通过下面的语句将它们导入进来:
import A, {myA, Something} from './A';

链接

StackOverflow上的解释