React-Native创建Component的三种方式

从ES5-ES6过程中，有多种创建Component的过程，今天我就给大家介绍我新写的几种创建Component的写法：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';
/**
 * 方式一；ES6的写法；
 * 推荐这种方式；
 */
export default class HelloComponent extends Component {
    render() {
        return <Text style={{fontSize:20,backgroundColor:"red"}}> Hello.{this.props.name} </Text>
    }
}
/**
 * 方式二：ES5
 */
var HelloComponent = React.createClass({
    render(){
        return <Text style={{fontSize:20,backgroundColor:"red"}}> Hello </Text>
    }
})
module.exports = HelloComponent;

/**
 * 方式三：函数式
 * 无状态的形式，不能使用this
 */
function HelloComponent(props) {
    return <Text style={{fontSize:20,backgroundColor:"red"}}> Hello.{props.name} </Text>
}
module.exports = HelloComponent;

终点：就这样，三种创建Component的方式就介绍完了！

当然，当创建的方式不同的时候，其实他们的导入方式也有几种，不知道看到博客的朋友是否注意到？

喜欢博客的朋友请多多关注哟！！！