Reactプロジェクトでのimportxxxとimport {}の違いについて

重要なのは最初です

ES6のエクスポートとエクスポートのデフォルトの両方を使用して、定数、関数、ファイル、モジュールなどをエクスポートできます。また、2つのインポート方法を使用して、それらを他のファイルまたはモジュールにインポートできます。モジュールにはエクスポートのデフォルトを1つだけ持つことができますが、複数のエクスポートが存在する可能性があります。違いは以下のとおりです。
1.エクスポートとエクスポートのデフォルトの両方を使用して、定数、関数、ファイル、モジュールなどを
エクスポートできます。2。ファイルまたはモジュールでは、複数のエクスポートとインポートが可能で、エクスポートのデフォルトは1つだけです
。3。エクスポートによるエクスポート、インポート時に{}を追加するには、デフォルトのエクスポートは必要ありません
。4。エクスポートは変数式を直接エクスポートできますが、デフォルトのエクスポートは機能しません。
以下のコードを見てください

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

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

以下は、上記のコードの最初の行にインポートされたreduxファイル内の2つのモジュールのソースコードです。

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

コードの形式から、パッケージ定義のエクスポートが公開されると、モジュールが中括弧で囲まれていることがわかります。
次のコードを見てください

import Myapp from "./mytest_redux/myapp";

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

これにより、Myappモジュールはエクスポートのデフォルト（デフォルトで公開されているパッケージ）であり、その導入には中括弧は必要ないことがわかりました。

この時点で説明は明確ですが、画面の前でわかりますか？わからない場合はよく見てください。

Reactプロジェクトでのimportxxxとimport {}の違いについて

重要なのは最初です

おすすめ