关闭

ES6 export 和 export default的区别

时间: 2019-01-02阅读: 1001标签: 模块

ES6中 export 和 export default 与 import使用的区别,使用 react native 代码详解


1、export 定义导出一个子组件 Greeting

import react, { Component } from "react";
import { View, Text } from "react-native";
export class Greeting extends Component {
    render() {
        return(
            <View>
                <Text>{this.props.name}</Text>
            <View>
        )
    }
}


2、在父组件中导入子组件

import React, { Component } from "react";
import { View, Text } from "react-native";

// greeting文件存储在src目录下
import { Greeting } from "./src/greeting";

import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(greeting.js)对外接口的名称Greeting相同。
如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名

import { bieming as Greeting } from "./src/greeting";


3、export default 
场景:从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名,否则无法加载。但是用户肯定不愿意去阅读子组件看看导出名称叫啥,然后回来导入,所以就有了 export default。

import React, { Component } from "react";
import { View, Text } from "react-native";
export default class Greeting extends Component {
    render() {
        return(
            <View>
                <Text>{this.props.name}</Text>
            <View>
        )
    }
}


4、import 导入模块

import React, { Component } from "react";
import { View, Text } from "react-native";

// greeting文件存储在src目录下
import Greeting from "./src/greeting";
// 或者
import AnyName from "./src/greeting";

上面代码的import命令,可以用任意名称指向greeting.js输出的方法,这时就不需要知道原模块输出的变量名。需要注意的是,这时import命令后面,不使用大括号。


总结:现在流行的前端框架,angular+ 主要使用 export 导出模块,react native 中使用 export default 导出模块,如今编辑器非常强大,安装插件会自动弹出模块名称,知道其导出怎么使用就可以了

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1945

关闭

Vue 中如何正确引入第三方模块

配置 webpack ProvidePlugin 全局引入,假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入;另外一种比较靠谱的方法是将第三方模块打包成插件,如我需要全局使用 echarts,那么在 src 目录下新建一个 lib

最全的前端模块化方案

模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容:CommonJS、AMD 及 核心原理实现、CMD 及 核心原理实现

node路径之path模块

node当在没在当前js文件下执行该js文件时,该js文件引用的路径会是相对于node命令的路径。显然会造成引用路径不对。因此;无论终端目录是在哪个磁盘下,node执行js文件时,里面的引用的路径都能只指向正确的

何为 CommonJS?为何封装模块?

CommonJS 是一个有志于构建 JavaScript 生态圈的组织。它有一个 邮件列表,有很多开发者参与其中。 整个社区致力于提高 JavaScript 程序的可移植性和可交换性,无论是在服务端还是浏览器端。

前端命令模块及其执行方法

1、将命令模块通过npm link进行全局注册后,即可在命令行窗口直接使用该命令 2、在其它模块中的package.json中引用命令模块,并增加scripts;增加对命令模块的依赖后,执行npm install后

http模块和fs模块

response.write()发送一块相应主体,用来给客户端发送相应数据。write可以使用多次,但是最后一定要使用end来结束响应,否则客户端会一直等待。response.end()此方法向服务器发出信号

node.js ES模块

例如在 ECMAScript 5 中引入的许多程序员首选的严格模式曾经是可选的,必须明确启用才行,同时它在 ES 模块中始终处于活动状态。因此,以下代码段在语法上可以解释为传统的 JavaScript 代码和 ES 模块

es6中的模块化

在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出)。先来看个例子,来对一个变量进行模块化

Nodejs核心模块简介

学习nodejs必须要掌握其核心,就像学JavaScript必须掌握函数、对象、数据类型、BOM、DOM等。nodejs核心也不少,这里介绍几个核心:Events模块、fs模块、stream的使用、http模块。

CommonJS的模块加载

Common这个英文单词的意思,相信大家都认识,我记得有一个词组common knowledge是常识的意思,那么CommonJS是不是也是类似于常识性的,大家都理解的意思呢?很明显不是,这个常识一点都不常识

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!