//ES5
var React = require("react");
var {
 Component,
 PropTypes
} = React; //引用React抽象组件

var ReactNative = require("react-native");
var {
 Image,
 Text,
} = ReactNative; //引用具体的React Native组件

//ES6
import React, { 
 Component,
 PropTypes,
} from 'react';
import {
 Image,
 Text
} from 'react-native'

//ES5
var MyComponent = React.createClass({
 ...
});
module.exports = MyComponent;

//ES6
export default class MyComponent extends Component{
 ...
}

//ES5
var MyComponent = require('./MyComponent');

//ES6
import MyComponent from './MyComponent';

//ES5
var Photo = React.createClass({
 render: function() {
  return (
   <Image source={this.props.source} />
  );
 },
});

//ES6
class Photo extends React.Component {
 render() {
  return (
   <Image source={this.props.source} />
  );
 }
}

//ES5 
var Photo = React.createClass({
 componentWillMount: function(){

 },
 render: function() {
  return (
   <Image source={this.props.source} />
  );
 },
});

//ES6
class Photo extends React.Component {
 componentWillMount() {

 }
 render() {
  return (
   <Image source={this.props.source} />
  );
 }
}

//ES5 
var Video = React.createClass({
 getDefaultProps: function() {
  return {
   autoPlay: false,
   maxLoops: 10,
  };
 },
 propTypes: {
  autoPlay: React.PropTypes.bool.isRequired,
  maxLoops: React.PropTypes.number.isRequired,
  posterFrameSrc: React.PropTypes.string.isRequired,
  videoSrc: React.PropTypes.string.isRequired,
 },
 render: function() {
  return (
   <View />
  );
 },
});

//ES6
class Video extends React.Component {
 static defaultProps = {
  autoPlay: false,
  maxLoops: 10,
 }; // 注意这里有分号
 static propTypes = {
  autoPlay: React.PropTypes.bool.isRequired,
  maxLoops: React.PropTypes.number.isRequired,
  posterFrameSrc: React.PropTypes.string.isRequired,
  videoSrc: React.PropTypes.string.isRequired,
 }; // 注意这里有分号
 render() {
  return (
   <View />
  );
 } // 注意这里既没有分号也没有逗号
}

//ES6
class Video extends React.Component {
 render() {
  return (
   <View />
  );
 }
}
Video.defaultProps = {
 autoPlay: false,
 maxLoops: 10,
};
Video.propTypes = {
 autoPlay: React.PropTypes.bool.isRequired,
 maxLoops: React.PropTypes.number.isRequired,
 posterFrameSrc: React.PropTypes.string.isRequired,
 videoSrc: React.PropTypes.string.isRequired,
};

//ES5 
var Video = React.createClass({
 getInitialState: function() {
  return {
   loopsRemaining: this.props.maxLoops,
  };
 },
})

//ES6
class Video extends React.Component {
 state = {
  loopsRemaining: this.props.maxLoops,
 }
}

//ES6
class Video extends React.Component {
 constructor(props){
  super(props);
  this.state = {
   loopsRemaining: this.props.maxLoops,
  };
 }
}

//ES5
var PostInfo = React.createClass({
 handleOptionsButtonClick: function(e) {
  // Here, 'this' refers to the component instance.
  this.setState({showOptionsModal: true});
 },
 render: function(){
  return (
   <TouchableHighlight onPress={this.handleOptionsButtonClick}>
    <Text>{this.props.label}</Text>
   </TouchableHighlight>
  )
 },
});

//ES6
class PostInfo extends React.Component
{
 handleOptionsButtonClick(e){
  this.setState({showOptionsModal: true});
 }
 render(){
  return (
   <TouchableHighlight 
    onPress={this.handleOptionsButtonClick.bind(this)}
    onPress={e=>this.handleOptionsButtonClick(e)}
    >
    <Text>{this.props.label}</Text>
   </TouchableHighlight>
  )
 },
}

// 箭头函数的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
 alert("foo");
}
e=>{
 if (e == 0){
  return 0;
 }
 return 1000/e;
}

// 错误的做法
class PauseMenu extends React.Component{
 componentWillMount(){
  AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
 }
 componentDidUnmount(){
  AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
 }
 onAppPaused(event){
 }
}

// 正确的做法
class PauseMenu extends React.Component{
 constructor(props){
  super(props);
  this._onAppPaused = this.onAppPaused.bind(this);
 }
 componentWillMount(){
  AppStateIOS.addEventListener('change', this._onAppPaused);
 }
 componentDidUnmount(){
  AppStateIOS.removeEventListener('change', this._onAppPaused);
 }
 onAppPaused(event){
 }
}

// 正确的做法
class PauseMenu extends React.Component{
 componentWillMount(){
  AppStateIOS.addEventListener('change', this.onAppPaused);
 }
 componentDidUnmount(){
  AppStateIOS.removeEventListener('change', this.onAppPaused);
 }
 onAppPaused = (event) => {
  //把方法直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
 }
}

var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
 mixins: [PureRenderMixin],

 render: function() {
  return <div className={this.props.className}>foo</div>;
 }
});

//Enhance.js
import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
 constructor() {
  this.state = { data: null };
 }
 componentDidMount() {
  this.setState({ data: 'Hello' });
 }
 render() {
  return <ComposedComponent {...this.props} data={this.state.data} />;
 }
};

//HigherOrderComponent.js
import { Enhance } from "./Enhance";

class MyComponent {
 render() {
  if (!this.data) return <div>Waiting...</div>;
  return <div>{this.data}</div>;
 }
}

export default Enhance(MyComponent); // Enhanced component

class AutoloadingPostsGrid extends React.Component {
  render() {
    var {
      className,
      ...others, // contains all properties of this.props except for className
    } = this.props;
    return (
      <div className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
      </div>
    );
  }
}

<div {...this.props} className="override">
  …
</div>

<div className="base" {...this.props}>
  …
</div>