RN RefreshControl 官方文档ES5与 ES6的对比

官方代码：

'use strict';

const React = require('react');
const ReactNative = require('react-native');
const {
  ScrollView,
  StyleSheet,
  RefreshControl,
  Text,
  TouchableWithoutFeedback,
  View,
} = ReactNative;

const styles = StyleSheet.create({
  row: {
    borderColor: 'grey',
    borderWidth: 1,
    padding: 20,
    backgroundColor: '#3a5795',
    margin: 5,
  },
  text: {
    alignSelf: 'center',
    color: '#fff',
  },
  scrollview: {
    flex: 1,
  },
});

const Row = React.createClass({
  _onClick: function() {
    this.props.onClick(this.props.data);
  },
  render: function() {
    return (
     <TouchableWithoutFeedback onPress={this._onClick} >
        <View style={styles.row}>
          <Text style={styles.text}>
            {this.props.data.text + ' (' + this.props.data.clicks + ' clicks)'}
          </Text>
        </View>
      </TouchableWithoutFeedback>
    );
  },
});

const RefreshControlExample = React.createClass({
  statics: {
    title: '<RefreshControl>',
    description: 'Adds pull-to-refresh support to a scrollview.'
  },

  getInitialState() {
    return {
      isRefreshing: false,
      loaded: 0,
      rowData: Array.from(new Array(20)).map(
        (val, i) => ({text: 'Initial row ' + i, clicks: 0})),
    };
  },

  _onClick(row) {
    row.clicks++;
    this.setState({
      rowData: this.state.rowData,
    });
  },

  render() {
    const rows = this.state.rowData.map((row, ii) => {
      return <Row key={ii} data={row} onClick={this._onClick}/>;
    });
    return (
      <ScrollView
        style={styles.scrollview}
        refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this._onRefresh}
            tintColor="#ff0000"
            title="Loading..."
            titleColor="#00ff00"
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor="#ffff00"
          />
        }>
        {rows}
      </ScrollView>
    );
  },

  _onRefresh() {
    this.setState({isRefreshing: true});
    setTimeout(() => {
      // prepend 10 items
      const rowData = Array.from(new Array(10))
      .map((val, i) => ({
        text: 'Loaded row ' + (+this.state.loaded + i),
        clicks: 0,
      }))
      .concat(this.state.rowData);

      this.setState({
        loaded: this.state.loaded + 10,
        isRefreshing: false,
        rowData: rowData,
      });
    }, 5000);
  },
});

module.exports = RefreshControlExample;

ES6：

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableWithoutFeedback,
    RefreshControl,
} from 'react-native';

const styles = StyleSheet.create({
    row:{
        borderColor:'grey',
        borderWidth:1,
        padding:20,
        backgroundColor:'#3a5795',
        margin:5,
    },
    text:{
        alignSelf:'center',
        color:'#fff',
    },
    scrollview:{
        flex:1,
    },
});

class Row extends  Component {

    _onClick() {
        this.props.onClick(this.props.data);
    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={this._onClick.bind(this)}>
                <View style={styles.row}>
                    <Text style={styles.text}>
                        {this.props.data.text + '(' + this.props.data.clicks + ' clicks)'}
                    </Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

export default class RefreshControlExample extends Component<Props> {
    constructor(props) {
        super(props);

        this.state = {
            isRefreshing: false,
            loaded:0,
            rowData: Array.from(new Array(20)).map(
                (val, i) => ({
                    text: 'Initial row ' + i,
                    clicks: 0
                })
            ),
        };
    }

    _onClick(row) {
        row.clicks++;
        this.setState({
            rowData: this.state.rowData,
        });
    }

    render() {
        const rows = this.state.rowData.map( (row, ii) => {
            return <Row key={ii} data={row} onClick={this._onClick.bind(this)}/>;
        });


        return (
            <ScrollView style={styles.scrollview}
                        refreshControl={
                            <RefreshControl refreshing={this.state.isRefreshing}
                                            onRefresh={this._onRefresh.bind(this)}
                                            tintColor='#ff0000'
                                            title='Loading...'
                                            titleColor='#00ff00'
                                            colors={['#ff0000','#00ff00','#0000ff']}
                                            progressBackgroundColor='#ffff00'
                            />
                        }>
                {rows}
            </ScrollView>
        );
    }

    _onRefresh() {
        this.setState({
            isRefreshing: true,
        });

        setTimeout( () => {
            const rowNewData = Array.from(new Array(10))
                .map( (val, i) => ({
                text: 'Loaded row ' + ( this.state.loaded + i),
                clicks: 0,
            }))
                .concat(this.state.rowData);

            this.setState({
                loaded: this.state.loaded + 10,
                isRefreshing: false,
                rowData: rowNewData,
            });
        }, 5000);
    }
}

module.exports = RefreshControlExample;

区别：

创建类

ES5:

const Row = React.createClass({});

ES6:

class Row extends  React.Component {}