react的ES5与ES6写法的不同（一）

最近在学习react的编程写法，原本一直在用ES5的老版写法，近期接触了ES6的写法，想同大家一起分享一下两者的不同之处：

一、引入方式的不同：

ES5的写法：var React = require("react");  

ES6的写法：import React, { Component, PropTypes } from 'react

二、组件的创建方式不同：

ES5的写法：var Dome = React.createClass( {      
} );  

ES6的写法：class Dome extends Component {    
}

三、例如：我们分别用React的两种写法进行输出Hello world！时，我们会使用如下的写法：

ES5的写法：var Dome = React.createClass( {  
        render:function() {
                                           return (
                                                    

Hello world！

                                            );
                                 }
} );  

 ReactDOM.render(,document.getElementById('dome'));

ES6的写法： class Dome extends Component {  
    render() {
               return (
                 

Hello world！

               );
           }
}

ReactDOM.render(,document.getElementById('dome'));

四、this.props.children

ES5的写法：varDome = React.createClass({
  render: function() {
    return (
     

      {
        React.Children.map(this.props.children, function (child) {
          return
• {child}
;
        })
      }
     

    );
  }
});

ES6的写法：class Dome extends React.Component {      
  render() {
    return (
     

        {
          React.Children.map(this.props.children, (child) => {

return

• {child}

})
         }
     

    )
  }
}

ReactDOM.render(
  <Dome>
    home

     Favs

                                                 Stats

  Dome>,
  document.body
);