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 (
                                                    <h1>Hello world！</h1>
                                            );
                                 }
} );  

 ReactDOM.render(<Dome />,document.getElementById('dome'));

ES6的写法： class Dome extends Component {  
    render() {
               return (
                  <h1>Hello world！</h1>
               );
           }
}

ReactDOM.render(<Dome />,document.getElementById('dome'));

四、this.props.children

ES5的写法：varDome = React.createClass({
  render: function() {
    return (
      <ul>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ul>
    );
  }
});

ES6的写法：class Dome extends React.Component {      
  render() {
    return (
      <ul>
        {
          React.Children.map(this.props.children, (child) => {

return <li>{child}</li>

})
         }
      </ul>
    )
  }
}

ReactDOM.render(
  <Dome>
    <span>home</span>

     <span>Favs</span>

                                                 <span>Stats</span>

  </Dome>,
  document.body
);