使用ES6编写React应用(ES5转换为ES6)

这里列出React项目从ES5转换为ES6的的变化。

1、导入React(require => import)

ES5

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

ES6

import React, {Component, PropTypes} from 'react';

2、使用Class创建组件(React.createClass => extends React.Component)

ES5

var Mycomponent = React.createClass({
  onClick: function(e) { … },
  render: function() { … },
});

ES5使用React.createClass来创建组件。

ES6

class Mycomponent extends React.Component {
  onClick(e) { … }
  render() { … }
}

ES6使用class关键字一个类,此类扩展于React.Component,之前在ES5里使用的函数,在ES6里变成了类的方法,不需要function关键字。

3、导出(module.exports => export default)

ES5

var Mycomponent = React.createClass({
  render: function() { ... },
});

module.exports = Mycomponent;

ES5使用module.exports方式导出组件

ES6

export default class Mycomponent extends React.Component {
  render() {...}
}

ES6使用export default导出默认组件

4、属性的初始化

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

var MyComponent = React.createClass({
    propTypes: {
      name: ReactPropTypes.string.isRequired
    }
});

ES5的propTypes是作为React.createClass的参数属性传给组件。

ES6

import React, {Component, PropTypes} from
export default class MyComponent extends React.Component {
    render() {...}
}

MyComponent.propTypes = {
    title: PropTypes.string.isRequired
}

ES6的propTypes定义在组件的外面。

ES7

import React, {Component, PropTypes} from 'react';

export default class MyComponent extends React.Component {
    static propTypes = {
        title: PropTypes.string.isRequired
    }

    render() {...}
}

ES7更进一步,把propTypes作为静态属性定义在组件内。

5、getInitialState

ES5

var MyComponent = React.createClass({     getInitialState: function() {         return {             title: this.props.title         };     }, });

ES5初始化的状态可以定义函数getInitialState里,它返回一个对象包含了组件的状态

ES6

export default class MyComponent extends Component {
    constructor(props) {    
        super(props);
        this.state = {
            title: props.title
        };
    }
}

ES6则可以把组件的状态属性定义在构造函数contstructor里。

ES7

export default class MyComponent extends Component {
    state = {
        title: this.props.title
    };

    // 跟着构造函数constructor
}

ES7就更进一步,把状态定义构造函数外,定义为成员变量。

6、方法的访问(箭头函数)

ES5

var MyComponent = React.createClass({
    handleClick: function(event) {
        this.setState({title: !this.state.title});  // this自动绑定组件
    }
});

ES5函数里使用的this会自动绑定到组件上。

ES6

export default class MyComponent extends React.Component {
    constructor() { 
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        this.setState({title: !this.state.title});  
    }
}

ES5的函数为ES6的方法,方法里使用的this需要在组件的构造函数里使用bind(this)绑定。

箭头函数

export default class MyComponent extends Component {
    handleClick = (event) => {
        this.setState({liked: !this.state.liked});  
    }
}

使用箭头函数可以不用在构造函数里使用bind(this)绑定到方法,这是因为箭头函数的this就是它所定义的上下文的this,即为组件的this。

箭头函数里的this可以参考:理解JavaScript普通函数以及箭头函数里使用的this

版权声明:著作权归作者所有。

相关推荐

ES6 函数使用解构赋值(Destructuring )的几点好处

解构赋值(Destructuring )是ES6新增的特性。使用解构赋值有以下几点好处:命名参数设置默认参数多个返回值命名参数在传统的函数定义如下:function findUsersByRole (   role,    withContactInfo,    includeInactive )&

JavaScript ES6扩展运算符(...)用例

ES6新增了扩展运算符,它的语法很简单,使用三个点号表示“...”。它的作用是把数组展开为类似用逗号隔开的参数列表。这里介绍几种用例来理解扩展运算符的使用。用例1:插入数组如果我们要在一个数组插入另外一个数组的元素,可以结合splice和apply使用,如:a1 = [1,2,5,6,7]; a2 = [3,4]; a1.splice.apply(a1,&n

JavaScript(ES6)判断字符串是否包含子字符串的方法

ES6 includesES6的字符串新增了includes方法,我们可以用它来判断是否包含子字符串。str.includes(searchString[, position]) searchString:查询的子字符串position:可选,开始搜索的位置,默认为0'Blue Whale'.includes('Blue'); // returns

JavaScript ES 2017: 通过示例学习Async/Await

预备知识ES 2017新增了Asynchronous函数。 在JavaScript中,Async函数本质上是一种处理异步代码的比较简洁的方法。 为了理解这些是什么,以及它们是如何工作的,我们首先需要了解Promise。如果你不知道Promise是什么,那么你应该先阅读我发表的关于Promise的这篇文章。 在理解Promise之前,你是不会理解JavaScr