About the difference between import xxx and import {} in the React project

The important thing is at the beginning

Both export and export default in ES6 can be used to export constants, functions, files, modules, etc. You can import them in other files or modules through two methods of import. A module can only have one export default, but there can be several exports. The difference is below.
1. Both export and export default can be used to export constants, functions, files, modules, etc.
2. In a file or module, there can be multiple export and import, and there is only one export default
3. Export through export, when importing To add {}, export default does not need
4. export can directly export variable expressions, export default does not work

Look at the code below

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

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

Below is the source code of the two modules in the redux file imported into the first line of the above code

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>
>

It can be seen from the format of the code that when the package definition export is exposed, the module is introduced in braces.
Look at the following code

import Myapp from "./mytest_redux/myapp";

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

Through this we found that the Myapp module is export default (the package exposed by default), and its introduction does not require braces

At this point, the explanation is clear. Do you understand that in front of the screen? If you don't understand, look at it carefully.

Guess you like

Origin blog.csdn.net/qq_44606064/article/details/109016331