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

方式一 ES6创建组件的方式

export default class HelloComponent extends Component { 
render() { 
    return (<Text style={{fontSize:20,backgroundColor:'red'}}>Hello sun</Text>);
}}

方式二 ES5创建组件的方式

var HelloComponent=react.createClass({ 
render() { 
    return ( <Text style={{fontSize:20,backgroundColor:'red'}}>Hello ES5创建组件的方式</Text> ); 
    }
}) 
module.exports=HelloComponent; //导出

方式三 函数式

无状态，无法使用this，因为其没有指针，没有生命周期方法 pros 为函数的参数 通过使用{pros.name}来获得从index.js中传过来的值

function HelloComponent(pros){ 
 return ( <Text style={{fontSize:20,backgroundColor:'red'}}>Hello 函数式 {pros.name}</Text> ); 
} 

module.exports=HelloComponent; //导出

在index.js中

import HelloComponent from './HelloComponent' //加入此行 

export default class simple extends Component {
render() { 
 return (
 <View style={styles.container}> 
     <HelloComponent name = "小明"/> //使用HelloComponent组件 
 </View> );
} }

第一种和第二种方式也可以通过{this.pros.name}来获得index.js中传过来的值。当创建的方式不同的时候，其实他们的导入方式也有几种，不知道看到博客的朋友是否注意到

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/766