- 無狀態(tài)組件主要用來定義模板童太,接收來自父組件props傳遞過來的數(shù)據(jù),使用{props.xxx}的表達(dá)式把props塞到模板里面胸完。無狀態(tài)組件應(yīng)該保持模板的純粹性书释,以便于組件復(fù)用。創(chuàng)建無狀態(tài)組件如下:
var Header = (props) = (
<div>{props.xxx}</div>
);
- 有狀態(tài)組件主要用來定義交互邏輯和業(yè)務(wù)數(shù)據(jù)(如果用了Redux赊窥,可以把業(yè)務(wù)數(shù)據(jù)抽離出去統(tǒng)一管理)爆惧,使用{this.state.xxx}的表達(dá)式把業(yè)務(wù)數(shù)據(jù)掛載到容器組件的實(shí)例上(有狀態(tài)組件也可以叫做容器組件,無狀態(tài)組件也可以叫做展示組件)锨能,然后傳遞props到展示組件扯再,展示組件接收到props芍耘,把props塞到模板里面。創(chuàng)建有狀態(tài)組件如下:
class Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<Header />
)
}
}