一、props屬性知識點
1.每個組件對象都會有props(properties的簡寫)屬性
2.組件標籤的所有屬性都保存在props中
3.內部讀取某個屬性值: this.props.propertyName
4.作用: 通過標籤屬性從組件外向組件內傳遞數據(只讀)
5.對props中的屬性值進行類型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired}
6.擴展屬性: 將對象的所有屬性通過props傳遞
二、組件的組合
1、 組件標籤中包含子組件標籤
2、拆分組件: 拆分界面, 抽取組件
3、通過props傳遞數據
例題2、 如何用組件組合實現以下效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>components_composing</title>
</head>
<body>
<div id="example"></div>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
1. 拆分組件: 拆分界面, 抽取組件
* 單個標題組件: Welcome
* 應用組件: App
2. 分析確定傳遞數據和數據類型
* Welcome: props.name string
* App: props.names array
function Welcome(props) {
return <h2> Welcome {props.name} </h2>;}//直接傳參數
class App extends React.component{
render(){
return(
<div>
{ this.props.names.map(name =>{
return <Welcome name={name}/>
})}
</div>)}}
var names = ["Tom","Jack","rock"];
ReactDOM.render(<App names={names}/>,document.getElementById("example"))
</script>
</body>
</html>三、詳解例題2React渲染步驟
1.創建APP實例對象
2.調用render（），得到虛擬DOM
<div>
<Welcome name="TOM"/>
<Welcome name="Jack"/>
<Welcome name="rock"/>
</div>
3.找出其中的組件標籤<Welcome>，調用對應的Welcome函數，得到對應的虛擬DOM，替換<Welcome>
<div>
<h2>Welcome TOM</h2>
<h2>Welcome Jack</h2>
<h2>Welcome rock</h2>
</div>
4.將虛擬DOM轉化成真實DOM，並插入到example對應的div中