React与React Native 的ES5 ES6写法对照表

《React与React Native 的ES5 ES6写法对照表》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、ReactReactNative的ES5ES6写法对照表模块引用在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：//ES5varReact=require("react");var{Component,PropTypes}=React;//引用React抽象组件varReactNative=require("react-native");var{Image,Text,}=ReactNative;//引用具体的ReactNative组件在ES6里，import写法更为标准//ES6importReact,{Compo

2、nent,PropTypes,}from'react';import{Image,Text}from'react-native'注意在ReactNative里，import直到0.12+才能正常运作。导出单个类在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出//ES5varMyComponent=React.createClass({...});module.exports=MyComponent;在ES6里，通常用exportdefault来实现相同的功能：//ES6exportdefaultclassMyComponentexte

3、ndsComponent{...}引用的时候也类似：//ES5varMyComponent=require('./MyComponent');//ES6importMyComponentfrom'./MyComponent';定义组件在ES5里，通常通过React.createClass来定义一个组件类，像这样：//ES5varPhoto=React.createClass({render:function(){return();},});在ES6里，我们通过定义一个继承自React.Compone

4、nt的class来定义一个组件类，像这样：//ES6classPhotoextendsReact.Component{render(){return();}}给组件定义方法从上面的例子里可以看到，给组件定义方法不再用 名字:function()的写法，而是直接用名字()，在方法的最后也不能有逗号了。//ES5varPhoto=React.createClass({componentWillMount:function(){},render:function(){return(

5、={this.props.source}/>);},});//ES6classPhotoextendsReact.Component{componentWillMount(){}render(){return();}}定义组件的属性类型和默认属性在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现//ES5varVideo=React.createClass({getDefaultProps:function(){return{autoPlay:fa

6、lse,maxLoops:10,};},propTypes:{autoPlay:React.PropTypes.bool.isRequired,maxLoops:React.PropTypes.number.isRequired,posterFrameSrc:React.PropTypes.string.isRequired,videoSrc:React.PropTypes.string.isRequired,},render:function(){return();},});在ES6里，可以统一使用static成员来实现//ES6classVideo

7、extendsReact.Component{staticdefaultProps={autoPlay:false,maxLoops:10,};//注意这里有分号staticpropTypes={autoPlay:React.PropTypes.bool.isRequired,maxLoops:React.PropTypes.number.isRequired,posterFrameSrc:React.PropTypes.string.isRequired,videoSrc:React.PropTypes.string.isRequired,};//注意这里有分