从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://shenqiku.cn/article/FLY_766