React 組件 API
在本章節(jié)中我們將討論 React 組件 API。我們將講解以下7個(gè)方法:
設(shè)置狀態(tài)：setState
替換狀態(tài)：replaceState
設(shè)置屬性setProps
替換屬性replaceProps
強(qiáng)制更新：forceUpdate
獲取DOM節(jié)點(diǎn)：findDOMNode
判斷組件掛載狀態(tài)：isMounted
設(shè)置狀態(tài):setState
setState(object nextState[, function callback])
參數(shù)說(shuō)明
nextState，將要設(shè)置的新?tīng)顟B(tài)，該狀態(tài)會(huì)和當(dāng)前的state合并
callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會(huì)在setState設(shè)置成功，且組件重新渲染后調(diào)用。
合并nextState和當(dāng)前state，并重新渲染組件。setState是React事件處理函數(shù)中和請(qǐng)求回調(diào)函數(shù)中觸發(fā)UI更新的主要方法。
關(guān)于setState
不能在組件內(nèi)部通過(guò)this.state修改狀態(tài)，因?yàn)樵摖顟B(tài)會(huì)在調(diào)用setState()后被替換。
setState()并不會(huì)立即改變this.state，而是創(chuàng)建一個(gè)即將處理的state。setState()并不一定是同步的，為了提升性能React會(huì)批量執(zhí)行state和DOM渲染。
setState()總是會(huì)觸發(fā)一次組件重繪，除非在shouldComponentUpdate()中實(shí)現(xiàn)了一些條件渲染邏輯。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文網(wǎng) React 實(shí)例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="message" align="center"></div>
<script type="text/babel">
var Counter = React.createClass({
getInitialState: function () {
return { clickCount: 0 };
},
handleClick: function () {
this.setState(function(state) {
return {clickCount: state.clickCount + 1};
});
},
render: function () {
return (<h2 onClick={this.handleClick}>點(diǎn)我！點(diǎn)擊次數(shù)為: {this.state.clickCount}</h2>);
}
});
ReactDOM.render(
<Counter />,
document.getElementById('message')
);
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例中通過(guò)點(diǎn)擊 h2 標(biāo)簽來(lái)使得點(diǎn)擊計(jì)數(shù)器加 1。
替換狀態(tài)：replaceState
replaceState(object nextState[, function callback])
nextState，將要設(shè)置的新?tīng)顟B(tài)，該狀態(tài)會(huì)替換當(dāng)前的state。
callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會(huì)在replaceState設(shè)置成功，且組件重新渲染后調(diào)用。
replaceState()方法與setState()類(lèi)似，但是方法只會(huì)保留nextState中狀態(tài)，原state不在nextState中的狀態(tài)都會(huì)被刪除。
設(shè)置屬性：setProps
setProps(object nextProps[, function callback])
nextProps，將要設(shè)置的新屬性，該狀態(tài)會(huì)和當(dāng)前的props合并
callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會(huì)在setProps設(shè)置成功，且組件重新渲染后調(diào)用。
設(shè)置組件屬性，并重新渲染組件。
props相當(dāng)于組件的數(shù)據(jù)流，它總是會(huì)從父組件向下傳遞至所有的子組件中。當(dāng)和一個(gè)外部的JavaScript應(yīng)用集成時(shí)，我們可能會(huì)需要向組件傳遞數(shù)據(jù)或通知React.render()組件需要重新渲染，可以使用setProps()。
更新組件，我可以在節(jié)點(diǎn)上再次調(diào)用React.render()，也可以通過(guò)setProps()方法改變組件屬性，觸發(fā)組件重新渲染。
替換屬性：replaceProps
replaceProps(object nextProps[, function callback])
nextProps，將要設(shè)置的新屬性，該屬性會(huì)替換當(dāng)前的props。
callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會(huì)在replaceProps設(shè)置成功，且組件重新渲染后調(diào)用。
replaceProps()方法與setProps類(lèi)似，但它會(huì)刪除原有
props
強(qiáng)制更新：forceUpdate
forceUpdate([function callback])
參數(shù)說(shuō)明
callback，可選參數(shù)，回調(diào)函數(shù)。該函數(shù)會(huì)在組件render()方法調(diào)用后調(diào)用。
forceUpdate()方法會(huì)使組件調(diào)用自身的render()方法重新渲染組件，組件的子組件也會(huì)調(diào)用自己的render()。但是，組件重新渲染時(shí)，依然會(huì)讀取this.props和this.state，如果狀態(tài)沒(méi)有改變，那么React只會(huì)更新DOM。
forceUpdate()方法適用于this.props和this.state之外的組件重繪（如：修改了this.state后），通過(guò)該方法通知React需要調(diào)用render()
一般來(lái)說(shuō)，應(yīng)該盡量避免使用forceUpdate()，而僅從this.props和this.state中讀取狀態(tài)并由React觸發(fā)render()調(diào)用。
獲取DOM節(jié)點(diǎn)：findDOMNode
DOMElement findDOMNode()
返回值：DOM元素DOMElement
如果組件已經(jīng)掛載到DOM中，該方法返回對(duì)應(yīng)的本地瀏覽器 DOM 元素。當(dāng)render返回null 或 false時(shí)，this.findDOMNode()也會(huì)返回null。從DOM 中讀取值的時(shí)候，該方法很有用，如：獲取表單字段的值和做一些 DOM 操作。
判斷組件掛載狀態(tài)：isMounted
bool isMounted()
返回值：true或false，表示組件是否已掛載到DOM中
isMounted()方法用于判斷組件是否已掛載到DOM中?？梢允褂迷摲椒ūＷC了setState()和forceUpdate()在異步場(chǎng)景下的調(diào)用不會(huì)出錯(cuò)。
本文參考：http://itbilu.com/javascript/react/EkACBdqKe.html