ES5和ES6在React/React Native 中的写法 · React Native 学习整理

### ES5和ES6在React/React Native 中的写法 * * * * * 模块的引用 | ES5 | ES6 | | --- | --- | | ![](https://box.kancloud.cn/e4dd5a33eeccaf5fb3135c8fbe12bc3d_744x464.png) | ![](https://box.kancloud.cn/146d4593a3f5dcaa311341818d9448a9_718x408.png) | | 使用CommonJS标准，引入React包基本通过require进行 | 使用import写法 | 导出单个类 | ES5 | ES6 | | --- | --- | | ![](https://box.kancloud.cn/d2bdbc9cefe3431c0457174ea450ea28_798x416.png) | ![](https://box.kancloud.cn/522186f5284a39245dc01f0d731b03c3_796x384.png) | | 一般通过module.exports来导出 | 通常用export default | 定义组件 | ES5 | ES6 | | --- | --- | | ![](https://box.kancloud.cn/23f94f40be252834bd4511ec64271450_772x294.png) | ![](https://box.kancloud.cn/dc113c063aa96f0c95dd68a54d5581e8_780x292.png) | | 通过React.createClass来定义一个组件类 | 过定义一个继承自React.Component的class来定义一个组件类 | 给组件定义方法 | ES5 | ES6 | | --- | --- | | ![](https://box.kancloud.cn/16d2eec389621b8fef3453094a7e974d_776x408.png) | ![](https://box.kancloud.cn/c59f237b6f22384ac07378b5d74d2d12_770x402.png) | | 名字: function()的写法,需要写逗号 | 名字()的写法 | 定义组件的属性类型和默认属性 | ES5 | ES6 | | --- | --- | | ![](https://box.kancloud.cn/c7bcd21a5881a0260b91121cf26818cf_750x564.png) | ![](https://box.kancloud.cn/59522e3d78b89bc5404046ed7eb0f100_758x1158.png) | | 属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现 | 统一使用static成员来实现 | 初始化state | ES5 | ES6 | | --- | --- | | ![](https://box.kancloud.cn/24b1cf42714cf8271c50a638ed500644_766x306.png) | ![](https://box.kancloud.cn/4a810cf90c78491e6239303889c800da_794x682.png) | | | 在构造函数中初始化更易理解 | 把方法作为回调提供 | ES5 | ES6 | | --- | --- | | ![](https://box.kancloud.cn/87f4d529fb7d703f263a138f961910b7_782x358.png) | ![](https://box.kancloud.cn/b99547bdb9ec31d6185b692f29a4799c_738x430.png) | | React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。 | 需要通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）来调用 | 参考资料：[React/React Native 的ES5 ES6写法对照表](http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8)