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