ES6 export 和 export default的区别

ES6中 export 和 export default 与 import使用的区别，使用 react native 代码详解一、使用export 和 import1、export 定义导出一个子组件 Greetingimport 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 导出模块，如今编辑器非常强大，安装插件会自动弹出模块名称，知道其导出怎么使用就可以了