react/React Native 在 import 导入时，有的带花括号{},有的不带原理解析

在使用import引用模块时，如何正确使用{}

例如：有两个文件，home.js、user.js

一：不使用{}：

当需要在home.js中引入user.js的时候

//home.js 文件中
import user from './user';
对于上面的这种引入方法，只有user.js文件中提供默认的export defulat导出（必须是默认导出），这样在home.js文件中就可以使用user了。如下

//user.js 文件中
export default 'nihao'
在这种不使用{}来引用模块的情况下，import模块时的命名是随意的，即如下三种引用命名都是正确的：

// home.js文件中
import user from './user'
import user2 from './user'
import anyUser from './user'
因为它总是会解析到user.js中默认的export default。

 

二：使用花括号命名的方法{user}来导入user.js：

import { user } from './user'
上面代码生效的前提是，只有在模块user.js中有如下命名导出为user的export 的代码，也就是：

//user.js 文件中
export const user = 42
而且，在明确声明了命名导出后，那么在另一个js中使用{}引用模块时，import时的模块命名是有意义的，如下：

// home.js 文件中
import { user } from './user' // 正确，因为user.js中有命名为user的export （注意是非默认导出）
import { user2 } from './user' // 错误！因为user.js中没有命名为user2的export
import { anyUser } from './user' // 错误！因为user.js中没有命名为anyUser的export
要想上述代码正确执行，你需要明确声明每一个命名导出：

一个模块中只能有一个默认导出export default，但是却可以有任意命名导出（0个、1个、多个），你也可以如下，一次性将他们导入：

// user.js
import user, { user2, anyUser } from './user'
这里我们使用默认导出的user，以及命名导出user2和anyUser。

原文：https://blog.csdn.net/Chris__wang/article/details/82977626