关于React项目中的import xxx和import {}的区别

重要的放在最开始

ES6中export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过import的两种方式对其进行导入。一个模块只能有一个export default,但可以有若干个export。 区别就在下面。
1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中,export 、import可以有多个,export default仅有一个
3.通过export方式导出,在导入时要加{ },export default则不需要
4.export能直接导出变量表达式,export default不行

下面看代码

import {createStore,combineReducers} from 'redux'
import {allReducer,counterReducer} from "./reducer";

export const mystore = createStore(allReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

下面这是上面代码第一行导入redux文件中两个模块的源代码

export const createStore: StoreCreator

export function combineReducers<S>(
  reducers: ReducersMapObject<S, any>
): Reducer<CombinedState<S>>
export function combineReducers<S, A extends Action = AnyAction>(
  reducers: ReducersMapObject<S, A>
): Reducer<CombinedState<S>, A>
export function combineReducers<M extends ReducersMapObject<any, any>>(
  reducers: M
): Reducer<
  CombinedState<StateFromReducersMapObject<M>>,
  ActionFromReducersMapObject<M>
>

通过代码的格式看出,包定义export方式暴露的时候是用大括号方式进行引入模块的
再看下面代码

import Myapp from "./mytest_redux/myapp";

//下面这是myapp中的代码
export default class Myapp extends Component{
      add_name=()=>{
        this.props.store.dispatch(addnamefuc("feifei"))
    }
    render() {}
}

通过这个我们发现Myapp模块是export default(默认情况下暴露的包),它的引入不需要大括号

到此就解释清楚了,屏幕前的你是不是明白了呢,没明白再认真看一遍。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程小飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值