這篇文章主要的解釋了關(guān)於react組件refs的詳解，現(xiàn)在我們來看看正文的內(nèi)容

ref顧名思義我們知道，其實(shí)它就可以被看座是一個(gè)組件的參考，也可以說是一個(gè)標(biāo)誌。作為組件的屬性，其屬性值可以是字串也可以是函數(shù)。

其實(shí)，ref的使用不是必須的。即使在其適用的場(chǎng)景中也不是非用不可的，因?yàn)槭褂胷ef實(shí)現(xiàn)的功能同樣可以轉(zhuǎn)化成其他的方法來實(shí)現(xiàn)。但是，既然ref有其適用的場(chǎng)景，也就是說ref自有其優(yōu)勢(shì)。關(guān)於這一點(diǎn)和ref的適用場(chǎng)景，官方文件中是這樣說的：

在從render 方法中返回UI 結(jié)構(gòu)之後，你可能想衝出React 虛擬DOM 的限制，在render 返回的元件實(shí)例上呼叫某些方法。通常來說，這樣做對(duì)於應(yīng)用程式中的資料流是不必要的，因?yàn)榛钴S的資料（ Reactive data ）流總是確保最新的 props 被傳遞到每一個(gè)從 render() 輸出的子級(jí)中去。然而，仍然有幾個(gè)場(chǎng)景使用這種方式是必須的，或者說是有益的：尋找渲染出的元件的DOM標(biāo)記（可以認(rèn)為是DOM的識(shí)別ID），在一個(gè)大型的非React應(yīng)用中使用React元件或者是將你現(xiàn)有的程式碼轉(zhuǎn)換成React。

下面我們來看這樣的一個(gè)場(chǎng)景（下面的例子經(jīng)常被用於ref的講解，可見下面描述的場(chǎng)景應(yīng)該是比較經(jīng)典的）：透過某個(gè)事件使元素的值設(shè)為空字串，然後使該元素獲得焦點(diǎn)。

var App = React.createClass({
??? getInitialState: function() {
????? return {userInput: ''};
??##????? this.setState({userInput: e.target.value});
??? },
??? clearAndFocusInput: function() {
??為空字串
??????????????? //這裡想要達(dá)到為焦點(diǎn)?????
??? },
???#????????? value={this.state.userInput}
??????????? onChange={this.handleChange}
????????put type="button"
??????????????????? ? value="Reset And Focus"
?????={this.clearAndFocusInput}
??? ??????????/>
???????

點(diǎn)擊按鈕通知input元素將值設(shè)為空字串，但是還沒有實(shí)現(xiàn)使input元素獲得焦點(diǎn)。這實(shí)現(xiàn)起來有些困難，因?yàn)樵趓ender()中傳回的並不是實(shí)際的子元件的組合，只是一個(gè)特定時(shí)間特定實(shí)例的描述。這句話感覺挺繞的，其實(shí)render回傳的是

虛擬的DOM

，並不是真實(shí)的DOM。因此我們不需要僅僅著眼於那些從render()中返回的那些元件。

那說到這，對(duì)於我們?nèi)绾螌?shí)現(xiàn)獲得焦點(diǎn)並沒有太大的幫助。要實(shí)現(xiàn)獲得焦點(diǎn)這個(gè)功能我們需要藉助ref來實(shí)現(xiàn)。上面我們提到過ref的值有兩種類型，一種是字串、一種是回呼函數(shù)。


ref字串上屬性

React支援一個(gè)特殊的屬性，你可以將這個(gè)屬性加在任何經(jīng)由render()傳回的元件中。這也就是說對(duì)render()回傳的元件進(jìn)行一個(gè)標(biāo)記，可以方便的定位的這個(gè)元件實(shí)例。這就是ref的作用。

ref的形式如下

要想存取這個(gè)實(shí)例，可以透過this.refs來存?。?/p>

this.refs.myInput

先前版本中，我們可以透過React.findDOMNode(this.refs.myInput)來存取元件的DOM。但現(xiàn)在，已經(jīng)放棄了findDOMNode函數(shù)了，可以直接用this.refs.myInput來存取。 （想看更多就到PHP中文網(wǎng)React參考手冊(cè)欄位學(xué)習(xí)）

#ref回呼函數(shù)

##ref屬性也可以是一個(gè)回調(diào)函數(shù)而不是一個(gè)名字。?? 這個(gè)函數(shù)將要在元件被掛載之後立即執(zhí)行。這個(gè)參照的元件將會(huì)作為該函數(shù)的參數(shù)，這個(gè)函數(shù)可以立即使用這個(gè)元件參數(shù)，當(dāng)然也可以將其儲(chǔ)存以供日後使用。

其形式也比較簡(jiǎn)單：

render: function() {

?? return this._input = c} } /> ;
},
componentDidMount: function() {
?? this._input.focus();
},

或是

render: function() {

??? return (
????? ??????? ref={function(input) {
????();
????????? }
}} />
??? );
},

這裡要注意，當(dāng)這個(gè)參考元件被卸載且這個(gè)ref改變的時(shí)候，先前的ref的參數(shù)值將為null。這將有效的防止了內(nèi)存的洩漏。所以在上面程式碼中會(huì)有if判斷：

if(input != null){

???????? input.focus();

}

上面介紹了ref的使用場(chǎng)景和方法，下面我們就將上面的例子來補(bǔ)充完整，從而實(shí)現(xiàn)獲得

焦點(diǎn)的功能

var App = React.createClass({
??? getInitialState: function() {
??????? return {userInput: ''};
???.setState({userInput: e.target.value});
??? },
???clearAndFocusInput: function() {
??????? this.setState({userInput: ''}# // 清除輸入輸入); // 我們希望現(xiàn)在聚焦!
??????? if (this.refs.myText ##??? render: function() {
??????? return (
???????????

????????????? value={this.state.userInput}
????????????????????? ref =」myTextInput”??????
?????????????????????????????? ???????????????????? type="button"
?? ???????????????? onClick={this.clearAndFocusInput }
?????????????#???????????

??????? );
??? }
});
ReactDOM.render(
?? }
});
ReactDOM.render(
?? }
}) #);

在這個(gè)範(fàn)例中，render函數(shù)回傳一個(gè);實(shí)例的描述。但是真正的實(shí)例透過this.refs。 myTextInput取得。只要渲染回傳的某個(gè)子元件有 ref="myTextInput" ，this.refs. myTextInput就會(huì)取得正確的實(shí)例。

上面就是ref的所有內(nèi)容，更多關(guān)於ref的介紹可以參考Ref to Components。

本篇文章到這就結(jié)束了（想看更多就到PHP中文網(wǎng)
React使用手冊(cè)
欄位學(xué)習(xí)），有問題的可以在下方留言提問。

以上是React元件refs有什麼用？ react組件refs的作用及其使用詳解的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！