7.react 导入中的 as / 2. export和export default的区别

  • Z时代
  • 2024-01-10
  • 分类：综合

react

1. react 导入中的 as

import React from 'react'  // 只导入 是 React。

import * as React from 'react'  //（* ===所有），导入所有，并命名为 React。

import hash as Router from 'react'   // 导入hash，并命名为 Router。

expor default useStore as useAppStore  // 导出 useStore 并命名为 useAppStore

2. export和export default的区别

1. export与export default均可用于导出常量、函数、文件、模块

2. 你可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块)名 + from + "./地址" 的方式，将其导入，以便能够对其进行使用

3. 在一个文件或模块中，export、import可以有多个，export default仅有一个

4. 通过export方式导出多个内容的时候，在导入时要加{ }，如果只有一个也可以不解构，export default则不需要

其实很多时候export与export default可以实现同样的目的，只是用法有些区别。注意第四条，通过export方式导出导出多个内容的时候，在导入时要加{ }，export default则不需要。

使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名(也就是说：引入的变量名可以和导出的不一致，只要路径正确就可以引入)。

export default  ：

import '../css/myApp.css';
import React, {Component} from 'react';
// import { Link } from 'react-router-dom';
import {connect} from 'react-redux';
// import {bindActionCreators} from 'redux';
// import * as actioncreators from '../../actioncreators/actioncreate';
import actions from '../../store/action';
class myApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  };
render() {
    return (
      <div className="box_1">
      </div>
    )
  }
};
export default connect(state => state, actions)(myApp);
/*-------------------------引入的时候--------------------------*/
import App from "../myApp/myApp.js"    // 名称可以不同，只要路径正确就可以引入
import myApp as App from "../myApp/myApp.js"  // 引入，并重新命名，对 export 导出的同样适用

export ：

export {
  useStore,
  useAction as useAppAction
}
/*--------------------------引入的时候--------------------------*/
import {useAppAction} from "store/appStore/appStore"; // 引入的名称必须和导出的一样

以上是 7.react 导入中的 as / 2. export和export default的区别 的全部内容， 来源链接： utcz.com/z/381688.html

回到顶部