React的ES5与ES6写法对比

ES6有许多新的特性，语法也在ES5上有较大的变化，在React中应用广泛，下面列举部分示例，体会一下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()