React,React Native中的es5和es6写法对照

es6用在React中的写法总结：

    在es6还没有完全支持到浏览器的阶段里，已经有很多技术人员开始用es6的写法来超前编程了，因为有转义es6语法的工具帮助下，大家才可大量使用。解析看看es6写法用在react中的代码呈现。

 

1.引用外部文件 

//es5写法
var React  = require('react');

var {Image,Text}= React;

 

//es6
import  React,{Image,Text} from 'react';

2.创建React模块         

//es5
var MyComponent = React.createClass({

             ...

});

module.exports = MyComponent;

 

//es6:使用export default来实现

 export default class MyComponent extends React.Component{

              ...

}

3.创建React组件

//es5
var Input = React.createClass({
    render:function(){
        return (
          <Input  source={this.props.source}  />
        );
    }
});

 

//在es6里，通过定义一个继承自React.Component的class来定义一个组件类
class Input extends React.Component{
     render(){
         return(
           <Input  source={this.props.source} />
      );
   }

}

4.创建React函数方式

//es5
var Input = React.createClass({
      getInitialState:function(){
         ...
      },
      render:function(){
         renturn(
            <Input />
         );
      }
});

 

//es6
class Input extends React.Component{
    getInitialState(){
      ...
    }
    render(){
      <Input />
    }
}

 5.初始化state

 

//es5
var Star = React.createClass({
   getInitialState:function(){
       return{
           sayHello:this.props.hello
       }
   }
});

 

//es6 有2种写法
第一种：
class Star extends React.Component{
    state = {
         sayHello:this.props.hello
   }
}

第二种：
class Star extends React.Component{
   constructor(props){
     super(props);
     this.state = {
           sayHello:this.props.hello
     }
   }
}

 

 5.定义组件属性类型和默认属性

 

//es5
var Star = React.createClass({
   getDefaultProps:function(){
      return{
           minVal:0,
           maxVal:true
       }
   },
   propTypes:{
       minVal:React.PropTypes.number.isRequired,
       maxVal:React.PropTypes.bool.isRequired
   },
   render:function(){
     return (
        <View />
     )
   }
});

 

//es6里可以统一使用static实现.在static成员之间用；号隔开
class Star extends React.Component{
   static defaultProps = {
       minVal:0,
       maxVal:true
   };//注意；号
   static propType = {
       minVal:React.PropTypes.number.isReqired,
       maxVal:React.PropTypes.bool.isRequired
   };
   render(){
        return (
           <View />
       )
   }
}

//另一种写法
class Star extends React.Component{
  render(){
     return(
        <View />
     )
  }
}

Star.defaultProps = {
    minVal:0,
    maxVal:true
}

Star.propTypes = {
    minVal:React.PropTypes.number.isRequired,
    maxVal:React.PropTypes.bool.isRequired
}