React-Native,ES 5とES 6の書き方の違いまとめ

961 ワード

  • 導入モジュールの違い
  • //es5:
    var React = require('react')
    //es6(  )
    import React,{Component} from 'react'
    
  • コンポーネント宣言異なる
  • //es5
    //  createClass,      ,         
    //      getDefaultProps getInitialState  , getInitialState   ,        
    var MyModule = React.createClass({
    //es5     :function(){}    
      getDefaultProps:function(){
        times:0
      },
    
      getInitialState:function(){
        return {
          times : this.props.times
      }
    },
    
    render:function(){
        return(
          ***
        )
      }
    })
    
    //es6-   ,     
    
    class MyModule extends Component{
    //        getDefaultProps getInitialState  ,            
        constructor(props) {
          super(props);
          this.state = {times: this.props.times};
      }
    //es6          
      render(){
        return(
            ***
            )
    }
    
    }
    
    
  • thisの指向
  • //es5 this         
    onPress={this.hintHandler}
    //es6    bind
    onPress={this.hintHandler.bind(this)}