state 和 props 主要的區(qū)別在于 props 是不可變的，而 state 可以根據(jù)與用戶交互來(lái)改變形病。這就是為什么有些容器組件需要定義 state 來(lái)更新和修改數(shù)據(jù)粘驰。 而子組件只能通過(guò) props 來(lái)傳遞數(shù)據(jù)胆绊。
--菜鳥教程
props是在調(diào)用組件的時(shí)候定義的，通過(guò)this.props來(lái)獲取的颜屠。
<div id="demo"></div>
<script type="text/babel">
var Prop = React.createClass({
render:function(){
return <p>這是一個(gè)基礎(chǔ)的{this.props.prop}</p>
}
});
ReactDOM.render(
<Prop prop='props'/>,
document.getElementById('demo')
);
</script>
輸出結(jié)果：這是個(gè)一個(gè)基礎(chǔ)的props
關(guān)于props辰妙，有默認(rèn)值的「撸可以通過(guò) getDefaultProps() 方法為 props 設(shè)置默認(rèn)值密浑。
var Prop = React.createClass({
getDefaultProps:function(){
return {
prop:'props',
end:'!!!',
num:1234567890
}
},
render:function(){
return <p>這是一個(gè)基礎(chǔ)的{this.props.prop}{this.props.end}再來(lái)段數(shù)字{this.props.num}</p>
}
});
ReactDOM.render(
<Prop/>,
document.getElementById('demo')
);
輸出結(jié)果：這是一個(gè)基礎(chǔ)的props!!!再來(lái)段數(shù)字1234567890
通過(guò)兩次的對(duì)比，可以看出來(lái)使用方法粗井，在getDefaultProps()方法內(nèi)尔破，return的是個(gè)對(duì)象街图，寫法就是js的對(duì)象寫法。
雖然不能改變props但是我們可以通過(guò)state和props組合的方式懒构。來(lái)改變現(xiàn)實(shí)的內(nèi)容餐济。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<title></title>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
var PropsName = React.createClass({
render:function(){
return <p>{this.props.name}</p>
}
});
var PropsSite = React.createClass({
render:function(){
return <p>{this.props.site}</p>
}
});
var PropsOut = React.createClass({
getInitialState:function(){
return{
abc:true,
name:'多幸運(yùn)',
site:'http://www.jinyingjie.com',
nameA:'童話',
siteA:'http://m.jinyingjie.com'
}
},
dbClick:function(event){
this.setState({abc:!this.state.abc})
},
render:function(){
var name = this.state.abc?this.state.name:this.state.nameA;
var site = this.state.abc?this.state.site:this.state.siteA;
return(
<div>
<PropsName name={name}/>
<a href={site}><PropsSite site={site}/></a>
<button type='button' onClick={this.dbClick}>點(diǎn)擊切換歌名</button>
</div>
);
}
});
ReactDOM.render(
<PropsOut/>,
document.getElementById('demo')
);
</script>
</body>
</html>
輸出效果：
props1.PNG
點(diǎn)擊按鈕之后：
props2.PNG
哦啦，react學(xué)習(xí)告一段落了胆剧，因?yàn)橹饕强纯凑Z(yǔ)法絮姆，為學(xué)習(xí)react native打基礎(chǔ)，嘿嘿秩霍。
