IT忍者神龟之React中es5与es6写法对比

1.引入与导出方式不同

//ES5var React = require(“react”); //ES6import React, { Component, PropTypes } from ‘react

2.导入： ES5使用require导入，而ES6使用了import

//ES5module.exports = Test; //ES6export default Test;

3.创建组件的方式不同

//ES5var Test = React.createClass( {       ……….} ); //ES6class Test extends Component {       ……….}

4.初始化组件属性的方式以及限制组件属性类型的方式不同

//ES5var Test = React.createClass({      getDefaultProps: function() {             return {                   myPro: 10             };      },      propTypes: {             myPro: React.PropTypes.number. isRequired      }});//ES6class Test extends Component {       static defaultProps = {             myPro: 10       };       static propTypes = {             myPro: React.PropTypes.number. isRequired       };}

5.初始化方法不同

//ES5getInitialState: function() {      ………..      return {           myState: 10      }} //ES6constructor(props){        super(props);        this.state = {            myState: 10        };    }