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