共计 1233 个字符，预计需要花费 4 分钟才能阅读完成。
ES6 中 export 和 export default 与 import 使用的区别，使用 react native 代码详解
一、使用 export 和 import
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 导出模块，如今编辑器非常强大，安装插件会自动弹出模块名称，知道其导出怎么使用就可以了
