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

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

其實，ref的使用不是必須的。即使是在其適用的場景中也不是非用不可的，因為使用ref實現(xiàn)的功能同樣可以轉(zhuǎn)化成其他的方法來實現(xiàn)。但是，既然ref有其適用的場景，那也就是說ref自有其優(yōu)勢。關(guān)于這一點和ref的適用場景，官方文檔中是這樣說的：

在從 render 方法中返回 UI 結(jié)構(gòu)之后，你可能想沖出 React 虛擬 DOM 的限制，在 render 返回的組件實例上調(diào)用某些方法。通常來說，這樣做對于應(yīng)用中的數(shù)據(jù)流動是不必要的，因為活躍的數(shù)據(jù)（ Reactive data ）流總是確保最新的 props 被傳遞到每一個從 render() 輸出的子級中去。然而，仍然有幾個場景使用這種方式是必須的，或者說是有益的：查找渲染出的組件的DOM標(biāo)記（可以認(rèn)為是DOM的標(biāo)識ID），在一個大型的非React應(yīng)用中使用React組件或者是將你現(xiàn)有的代碼轉(zhuǎn)化成React。

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

var App = React.createClass({
??? getInitialState: function() {
????? return {userInput: ''};
??? },
??? handleChange: function(e) {
????? this.setState({userInput: e.target.value});
??? },
??? clearAndFocusInput: function() {
????? this.setState({userInput: ''}); // 設(shè)置值為空字符串
??????????????? //這里想要實現(xiàn)獲得焦點?????
??? },
??? render: function() {
????? return (
???????

????????? value={this.state.userInput}
onChange={this.handleChange}
/>
??????????????????? value="Reset And Focus"
onClick={this.clearAndFocusInput}
/>
???????

在上面例子中，我們已經(jīng)實現(xiàn)了點擊按鈕通知input元素將值設(shè)為空字符串，但是還沒有實現(xiàn)使input元素獲得焦點。這實現(xiàn)起來有些困難，因為在render()中返回的并不是實際的子組件的組合，僅僅是一個特定時間特定實例的描述。這句話感覺挺繞的，其實render返回的是虛擬的DOM，并不是真實的DOM。因此我們不需要僅僅著眼于那些從render()中返回的那些組件。

那說到這，對于我們?nèi)绾螌崿F(xiàn)獲得焦點并沒有太大的幫助。要想實現(xiàn)獲得焦點這個功能我們需要借助ref來實現(xiàn)。上面我們提到過ref的值有兩種類型，一種是字符串、一種是回調(diào)函數(shù)。

ref字符串上屬性

React支持一個特殊的屬性，你可以將這個屬性加在任何通過render()返回的組件中。這也就是說對render()返回的組件進(jìn)行一個標(biāo)記，可以方便的定位的這個組件實例。這就是ref的作用。

ref的形式如下

要想訪問這個實例，可以通過this.refs來訪問：

this.refs.myInput

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

ref回調(diào)函數(shù)

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

其形式也比較簡單：

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

或者是

render: function() {
??? return (
????? ref={function(input) {
if (input != null) {
input.focus();
}
}} />
??? );
},

這里需要注意，當(dāng)這個參照組件被卸載并且這個ref改變的時候，先前的ref的參數(shù)值將為null。這將有效的防止了內(nèi)存的泄露。所以在上面代碼中會有if判斷：

if(input != null){
???????? input.focus();
}

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

var App = React.createClass({
??? getInitialState: function() {
??????? return {userInput: ''};
??? },
??? handleChange: function(e) {
??????? this.setState({userInput: e.target.value});
??? },
??? clearAndFocusInput: function() {
??????? this.setState({userInput: ''}); // Clear the input
??????? // We wish to focus the now!
??????? if (this.refs.myTextInput !== null) {
??????????? this.refs.myTextInput.focus();
??????? }
??? },
??? render: function() {
??????? return (
???????????

? ?????????????? value={this.state.userInput}
onChange={this.handleChange}
ref=”myTextInput”
/>
??????????????? type="button"
value="Reset And Focus"
onClick={this.clearAndFocusInput}
/>
???????????