从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的方式就介绍完了!
当然,当创建的方式不同的时候,其实他们的导入方式也有几种,不知道看到博客的朋友是否注意到?
喜欢博客的朋友请多多关注哟!!!