《react与react native 的es5 es6写法对照表》由会员分享，可在线阅读，更多相关《react与react native 的es5 es6写法对照表（11页珍藏版）》请在金锄头文库上搜索。
1、ReactReact Native 的 ES5 ES6写法对照表模块引用在 ES5里，如果使用 CommonJS标准，引入 React包基本通过 require进行，代码类似这样：/ES5var React = require(react);var Component,PropTypes = React; /引用 React抽象组件var ReactNative = require(react-native);var Image,Text, = ReactNative; /引用具体的 React Native组件在 ES6里，import 写法更为标准/ES6import React, Com
2、ponent,PropTypes, from react;import Image,Text from react-native注意在 React Native里，import 直到 0.12+才能正常运作。导出单个类在 ES5里，要导出一个类给别的模块用，一般通过 module.exports来导出/ES5var MyComponent = React.createClass( .);module.exports = MyComponent;在 ES6里，通常用 export default来实现相同的功能：/ES6export default class MyComponent exten
3、ds Component.引用的时候也类似：/ES5var MyComponent = require(./MyComponent);/ES6import MyComponent from ./MyComponent;定义组件在 ES5里，通常通过 React.createClass来定义一个组件类，像这样：/ES5var Photo = React.createClass(render: function() return ();,);在 ES6里，我们通过定义一个继承自 React.Component的 class来定义一个组件类，像这样：/ES6class Photo extends R
4、eact.Component render() return ();给组件定义方法从上面的例子里可以看到，给组件定义方法不再用 名字: function()的写法，而是直接用名字()，在方法的最后也不能有逗号了。/ES5 var Photo = React.createClass(componentWillMount: function(),render: function() return ();,);/ES6class Photo extends React.Component componentWillMount() render() return ();定义组件的属性类型和默认属性在
5、ES5里，属性类型和默认属性分别通过 propTypes成员和 getDefaultProps方法来实现/ES5 var Video = React.createClass(getDefaultProps: function() return autoPlay: false,maxLoops: 10,;,propTypes: autoPlay: React.PropTypes.bool.isRequired,maxLoops: React.PropTypes.number.isRequired,posterFrameSrc: React.PropTypes.string.isRequired,
6、videoSrc: React.PropTypes.string.isRequired,render: function() return ();,);在 ES6里，可以统一使用 static成员来实现/ES6class Video extends React.Component static defaultProps = autoPlay: false,maxLoops: 10,; / 注意这里有分号static propTypes = autoPlay: React.PropTypes.bool.isRequired,maxLoops: React.PropTypes.number.isR
7、equired,posterFrameSrc: React.PropTypes.string.isRequired,videoSrc: React.PropTypes.string.isRequired, ; / 注意这里有分号render() return (); / 注意这里既没有分号也没有逗号也有人这么写，虽然不推荐，但读到代码的时候你应当能明白它的意思：/ES6class Video extends React.Component render() return ();Video.defaultProps = autoPlay: false,maxLoops: 10,;Video.pr
8、opTypes = autoPlay: React.PropTypes.bool.isRequired,maxLoops: React.PropTypes.number.isRequired,posterFrameSrc: React.PropTypes.string.isRequired,videoSrc: React.PropTypes.string.isRequired,;注意: 对 React开发者而言，static 成员在 IE10及之前版本不能被继承，而在 IE11和其它浏览器上可以，这有时候会带来一些问题。React Native 开发者可以不用担心这个问题。初始化 STATEE
9、S5下情况类似，/ES5 var Video = React.createClass(getInitialState: function() return loopsRemaining: this.props.maxLoops,;,)ES6下，有两种写法：/ES6class Video extends React.Component state = loopsRemaining: this.props.maxLoops,不过我们推荐更易理解的在构造函数中初始化（这样你还可以根据需要做一些计算）：/ES6class Video extends React.Component constructo
10、r(props)super(props);this.state = loopsRemaining: this.props.maxLoops,;把方法作为回调提供很多习惯于 ES6的用户反而不理解在 ES5下可以这么做：/ES5var PostInfo = React.createClass( handleOptionsButtonClick: function(e) / Here, this refers to the component instance.this.setState(showOptionsModal: true);,render: function()return (this
11、.props.label),);在 ES5下，React.createClass 会把所有的方法都 bind一遍，这样可以提交到任意的地方作为回调函数，而 this不会变化。但官方现在逐步认为这反而是不标准、不易理解的。在 ES6下，你需要通过 bind来绑定 this引用，或者使用箭头函数（它会绑定当前 scope的 this引用）来调用/ES6class PostInfo extends React.ComponenthandleOptionsButtonClick(e)this.setState(showOptionsModal: true);render()return (this.h
12、andleOptionsButtonClick(e)this.props.label ),箭头函数实际上是在这里定义了一个临时的函数，箭头函数的箭头=之前是一个空括号、单个的参数名、或用括号括起的多个参数名，而箭头之后可以是一个表达式（作为函数的返回值），或者是用花括号括起的函数体（需要自行通过 return来返回值，否则返回的是undefined）。/ 箭头函数的例子()=1v=v+1(a,b)=a+b()=alert(foo);e=if (e = 0)return 0;return 1000/e;需要注意的是，不论是 bind还是箭头函数，每次被执行都返回的是一个新的函数引用，因此如果你还
13、需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用/ 错误的做法 class PauseMenu extends React.ComponentcomponentWillMount()AppStateIOS.addEventListener(change, this.onAppPaused.bind(this);componentDidUnmount()AppStateIOS.removeEventListener(change, this.onAppPaused.bind(this); onAppPaused(event)/ 正确的做法 class PauseMen
14、u extends React.Componentconstructor(props)super(props);this._onAppPaused = this.onAppPaused.bind(this);componentWillMount()AppStateIOS.addEventListener(change, this._onAppPaused);componentDidUnmount()AppStateIOS.removeEventListener(change, this._onAppPaused);onAppPaused(event)从这个帖子中我们还学习到一种新的做法：/ 正
15、确的做法 class PauseMenu extends React.ComponentcomponentWillMount()AppStateIOS.addEventListener(change, this.onAppPaused);componentDidUnmount()AppStateIOS.removeEventListener(change, this.onAppPaused);onAppPaused = (event) = /把方法直接作为一个 arrow function的属性来定义，初始化的时候就绑定好了 this指针Mixins在 ES5下，我们经常使用 mixin来为我们的类添加一些新的方法，譬如 PureRenderMixinvar PureRenderMixin = require(react-addons-pure-render-mixin);React.createClass(mixins: PureRenderMixin,render: function() return foo;);然而现在官方已经不再打算在 ES6里继续推行 Mixin，他们说： M
