React的ES5与ES6写法对比

ES6有许多新的特性，语法也在ES5上有较大的变化，在React中应用广泛，下面列举部分示例，体会一下ES6的语法给我们带来的便利…

http://coderlt.coding.me/2016/05/17/React-ES5-ES6/

导入模块

ES5

var React = require( 'react'); var PropTypes = React.PropTypes;

ES6

使用 import 导出模块或模块中的方法

import React, {PropTypes} from 'react'

导出模块

ES5

var Header = React.createClass({ ... }) module.exports = Header;

ES6

使用 export default 来导出模块中的内容

export default class Header extends Component{ ... }

组件定义

ES5

var Photo = React.createClass({ render: function(){} })

ES6

使用 class 关键字标识为组件 使用 extends 来继承父组件

class Photo extends React.Component { render(){ return( < Image source={ this.props.source} /> ) } }

添加组件的事件

ES5

事件绑定不需要绑定this

var Photo = React.createClass({ clickEv: function(e){ ... }, render: function(){ return ( <div onClick={this.clickEv}></div> ) } })

ES6

使用 HTML 中的事件绑定属性

事件绑定需要绑定this

class Photo extends React.Component{ clickEv(){ ... } render(){ return ( <div onClick={ this.clickEv.bind( this)}></div> ) } }

指定组件的属性类型和默认属性

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, videoSrc: React .PropTypes .string .isRequired, }, render: function(){ return ( <View /> ) } })

ES6

使用 static 关键字标识为组件的属性

class Video extends React.Component{ static defaultProps = { autoPlay: false, maxLoops: 10 } static propTypes = { autoPlay: React .PropTypes .bool .isRequired, maxLoops: React .PropTypes .number .isRequired, posterFrameSrc: React .PropTypes .string .isRequired, videoSrc: React .PropTypes .string .isRequired, } render(){ return ( <View /> ) } }

STATE 初始化

ES5

var Video = React.createClass({ getInitialState: function(){ return ( loopsRemaining: this.props.maxLoops ) } })

ES6

在构造函数 constructor 中使用 this.state 来指定组件的状态

class Video extends React.Component { constructor(props){ super(props) this.state = { loopsRemaining: this.props.maxLoops } } }

参数传递

ES5

var PostInfo = React.createClass({ getInitialState: function(){ return ( showModal: false, ) }, btnClickEv: function(e){ this.setState({ showModal: true }); }, render: function(){ return ( <div onClick={this.btnClickEv}>{this.props.label}</div> ) } })

ES6

使用箭头函数传递参数

class PostInfo extends React.Component{ btnClickEv(e){ this.setState({ showModal: true }); } render(){ <div> <div onClick={e=> this.btnClickEv(e)}>{ this.props.label}</div> <div onClick={ this.btnClickEv.bind( this)}>{ this.props.label}</div> </div> } }

对象解构 与 属性延展

class AutoloadingPostsGrid extends React.Component { render() { var { className, ...others, // contains all properties of this.props except for className } = this.props; return ( <div className={className}> < PostsGrid {...others} /> <button onClick={ this.handleLoadMoreClick}> Load more</button> </div> ); } }

let const

ES5

for (var i = 0; i< arr. length; i++){} console. log( i)

ES6

for( let i = 0; i < arr.length; i++){} console. log(i); const PI = 3.1415; PI = 3; // TypeError: Assignment to constant variable.

promise

var promise = new Promise( function(resolve, reject){ var image = new Image(); image.onload = function() { resolve(image); }; image.onerror = function() { reject( new Error( 'Could not load image at ' + url)); }; image.src = url; }) promise.then(resoveCallback, rejectCallback); promise.then( function(){}, function(){}); promise.then( function(){}).catch( function(){}); Promise.all([p1, p2, p3]).then().catch()

# ReactJS