1.React.createClass
创建组件方式
import React,{Component} from 'react';
const Foo = React.createClass({
render(){
return(
<div>我的传统的方式创建的组件</div>
)
}
})
export default Foo;
2.ES6 class
创建方式
import React,{Component} from 'react';
export default class Test extends Component{
render(){
return(
<div>我是Es6的class创建方式创建的</div>
)
}
}
3.无状态函数创建方式
import React,{Component} from 'react';
export default function Bar() {
return(
<div>我是无状态函数创建方式</div>
)
}
4.关于无状态组件之间数据传递的方式
import React, {Component} from "react";
function Button(props) {
return(
<button style={{background:props.color}}>{props.children}</button>
)
}
Button.propTypes = {
color:React.PropTypes.string.isRequired,
children:React.PropTypes.string.isRequired,
}
function Message(props){
return(
<li>
<p>{props.text}</p>
<Button color={props.color}>Delete</Button>
</li>
)
}
Message.propTypes = {
text:React.PropTypes.string.isRequired,
color:React.PropTypes.string.isRequired,
}
export default function MessageList() {
const color="red";
const message = [
{text:'Hello React'},
{text:'Hello Redux'},
];
return(
<div>
<p>通过props将color逐层传递给Button组件</p>
{
message.map((item,index)=>(
<Message key={`list-${index}`} color={color} text={item.text}/>
))
}
</div>
)
}
5.无状态组件的说明
- 无状态组件没有实例化对象,因此无法使用生命周期函数,也没有内部状态