React 之export和export default

2021年11月23日 阅读数:3
这篇文章主要向大家介绍React 之export和export default,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、 ES6的模块化的基本规则或特色

  • 每个模块只加载一次, 每个JS只执行一次, 若是下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象;
  • 每个模块内声明的变量都是局部变量, 不会污染全局做用域
  • 模块内部的变量或者函数能够经过export导出
  • 一个模块能够导入别的模块

https://es6.ruanyifeng.com/php

es6中export和export default的区别

  • export与export default都可用于导出常量、函数、文件、模块es6

  • 你能够在其它文件或模块中经过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便可以对其进行使用swift

  • 在一个文件或模块中,export、import能够有多个,export default仅有一个模块化

  • 经过export方式导出,在导入时要加{ },export default则不须要函数

其实不少时候export与export default能够实现一样的目的,只是用法有些区别。注意第四条,经过export方式导出,在导入时要加{ },export default则不须要。使用export default命令,为模块指定默认输出,这样就不须要知道所要加载模块的变量名。this

React中使用export导出类能够有两种方法

1. export default classname

这种导出方式与export default class classname extends React.class相同spa

在其余文件中引用时采起以下方式code

import classname form path

例如:component

Com.jsorm

class Welcome extends React.Component{ render(){ return <h1> hello,{this.props.name}</h1> } } function App(){ return ( <div> <Welcome name="Sara"/> <Welcome nmae="Peng"/> </div> ); } export default App; 

index.js

import App  from './components/Com';
 
const element=<App/>; ReactDOM.render(element, document.getElementById('root')); 

2. export {classname1,classname2}

在其余文件中引用时采用以下方式

import {classname1,classname2} from path

import {classname1} //注意引用一个类时也要加上{} 

例如:

class Welcome extends React.Component{ render(){ return <h1> hello,{this.props.name}</h1> } } function App(){ return ( <div> <Welcome name="Sara"/> <Welcome nmae="Peng"/> </div> ); } export {Welcome,App}; 

index.js

import {App}  from './components/Com'; const element=<App/>; ReactDOM.render(element, document.getElementById('root'));


做者:三也视界
连接:https://www.jianshu.com/p/453665331e97
来源:简书
著做权归做者全部。商业转载请联系做者得到受权,非商业转载请注明出处。