React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦κ袌錾纤?JavaScript MVC 框架，都不滿意，就決定自己寫一套融欧，用來架設(shè) Instagram 的網(wǎng)站咏连。做出來以后盯孙，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了祟滴。
由于 React 的設(shè)計(jì)思想極其獨(dú)特振惰，屬于革命性創(chuàng)新，性能出眾垄懂，代碼邏輯卻非常簡單骑晶。所以，越來越多的人開始關(guān)注和使用草慧，認(rèn)為它可能是將來 Web 開發(fā)的主流工具桶蛔。
一、this.props.children詳解
this.props 對象的屬性與組件的屬性一一對應(yīng)漫谷，但是有一個(gè)例外仔雷，就是 this.props.children 屬性。它表示組件的所有子節(jié)點(diǎn)舔示。示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
);
</script>
</body>
</html>
代碼運(yùn)行結(jié)果如下圖所示：
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
上面代碼的 NoteList 組件有兩個(gè) span 子節(jié)點(diǎn)碟婆，它們都可以通過 this.props.children 讀取。
注意：
this.props.children 的值有三種可能：如果當(dāng)前組件沒有子節(jié)點(diǎn)惕稻，它就是 undefined ;如果有一個(gè)子節(jié)點(diǎn)脑融，數(shù)據(jù)類型是 object；如果有多個(gè)子節(jié)點(diǎn)缩宜，數(shù)據(jù)類型就是 array。所以甥温，處理 this.props.children 的時(shí)候要小心锻煌。
React 提供一個(gè)工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節(jié)點(diǎn)姻蚓，而不用擔(dān)心 this.props.children 的數(shù)據(jù)類型是 undefined還是 object宋梧。更多的 React.Children 的方法，請參考官方文檔狰挡。
二捂龄、PropTypes
組件的屬性可以接受任意值，字符串加叁、對象倦沧、函數(shù)等等都可以。有時(shí)它匕，我們需要一種機(jī)制展融，驗(yàn)證別人使用組件時(shí)，提供的參數(shù)是否符合要求豫柬。組件類的PropTypes屬性告希，就是用來驗(yàn)證組件實(shí)例的屬性是否符合要求扑浸，示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var data = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById('example')
);
</script>
</body>
</html>
運(yùn)行結(jié)果顯示如下：
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
上面的Mytitle組件有一個(gè)title屬性。PropTypes 告訴 React燕偶，這個(gè) title 屬性是必須的喝噪，而且它的值必須是字符串。現(xiàn)在指么，我們設(shè)置 title 屬性的值是一個(gè)數(shù)值酝惧。
var data = 123;
ReactDOM.render(
<MyTitle title={data} />,
document.body
);
這樣一來，title屬性就通不過驗(yàn)證了涧尿∠捣睿控制臺會顯示一行錯(cuò)誤信息。
Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
如下圖所示：
更多的PropTypes設(shè)置姑廉，可以查看官方文檔缺亮。此外，getDefaultProps方法可以用來設(shè)置組件屬性的默認(rèn)值桥言。示例代碼如下：
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);
上面代碼會輸出"Hello World"萌踱。
