ES5 vs ES6

ES5中

var React = require('react-native');

ES6中

import React from 'react-native';
.babelrc文件中添加一下内容
{
　　"whitelist": [
　　　　"es6.modules"
　　]
}
然后重新启动一下packger.sh，即npm start

 

ES5中

var {

    AppRegistry,
    StyleSheet,
    Text,
    View,

} = React;

 ES6中

let {

    AppRegistry,
    StyleSheet,
    Text,
    View,

} = React;

 

ES5中

var MyComponent = React.createClass(
    { 
        render: function(){ 
            return （ 
                   <Text />
            );
　　　　 }
　　 }
);

ES6中

class MyComponent extends React.Component {
　　　　render(){ 
            return( 
                   <Text />
            );
　　　　 }
}

 

ES5中

var NewDom = React.createClass({//类名一定要大写开头
    getDefaultProps: function() {//设置默认属性
       return {title:'133'};
    },
    propTypes: {
       title:React.PropTypes.string,
    },//属性校验器，表示必须是string
    render: function() {
       return <div>{this.props.title}</div>;//变量用花括号标识
    }
});

 ES6中

class NewDom extends React.Component{
  //不能再组件定义的时候定义一个属性
  render() {
      return <div >1{this.props.title}</div>;
  }//开头花括号一定要和小括号隔一个空格，否则识别不出来
}
//es6 这两个属性不能写在class内。
NewDom.propTypes={//属性校验器，表示改属性必须是bool，否则报错
  title: React.PropTypes.bool,
}
NewDom.defaultProps={title:'133'};//设置默认属性

 

ES5中

class *** extends React.Component{
  getInitialState: function() {
    return {liked: false};
  }
}

ES6中

class *** extends React.Component{
   constructor(props) {
    super(props);
    this.state = {liked: false};
  }
}

 

ES5中

var NewDom = React.createClass({//类名一定要大写开头
    btnClick:function(ele){
       console.info(ele);
       console.info(this.refs.tex);
    },
    render: function() {
       return <div >
          <input type="text" ref="tex" />
          <input type="button" onClick={this.btnClick} value='click me' />
       </div>;//变量用花括号标识
    }
});

 ES6中

class NewDom extends React.Component{
    btnClick(){
        console.info(this);//this为该组件类
        console.info(this.refs.tex);//this.refs.tex为组件里面索引为tex的
    }
    render() {
        return <div >
            <input type="text" ref="tex" />
            <input type="button" onClick={this.btnClick.bind(this)} value='click me' />
        </div>;//注意bind后面的this
    }
}

 

 ES6特征

• 类名(组件名)一定要用大写开头，否则自定义的组件无法编译，识别不出来。
• 类中定义render函数要注意两点，见代码注释。

render() {//开头花括号一定要和小括号隔一个空格，否则识别不出来
   return <ol>//标签前一半一定要和return一行
     {
        React.Children.map(this.props.children, function (child) {
           return <li>{child}</li>;
        })
      }
   </ol>;
}