React元件refs有什麼用？ react組件refs的作用及其使用詳解

這篇文章主要的解釋了關於react組件refs的詳解，現在我們來看看正文的內容

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

其實，ref的使用不是必須的。即使在其適用的場景中也不是非用不可的，因為使用ref實現的功能同樣可以轉化成其他的方法來實現。但是，既然ref有其適用的場景，也就是說ref自有其優勢。關於這一點和ref的適用場景，官方文件中是這樣說的：

在從render 方法中返回UI 結構之後，你可能想衝出React 虛擬DOM 的限制，在render 返回的元件實例上呼叫某些方法。通常來說，這樣做對於應用程式中的資料流是不必要的，因為活躍的資料（ Reactive data ）流總是確保最新的 props 被傳遞到每一個從 render() 輸出的子級中去。然而，仍然有幾個場景使用這種方式是必須的，或者說是有益的：尋找渲染出的元件的DOM標記（可以認為是DOM的識別ID），在一個大型的非React應用中使用React元件或者是將你現有的程式碼轉換成React。

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

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

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

虛擬的DOM

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

那說到這，對於我們如何實現獲得焦點並沒有太大的幫助。要實現獲得焦點這個功能我們需要藉助ref來實現。上面我們提到過ref的值有兩種類型，一種是字串、一種是回呼函數。


ref字串上屬性

React支援一個特殊的屬性，你可以將這個屬性加在任何經由render()傳回的元件中。這也就是說對render()回傳的元件進行一個標記，可以方便的定位的這個元件實例。這就是ref的作用。

ref的形式如下

要想存取這個實例，可以透過this.refs來存取：

this.refs.myInput

先前版本中，我們可以透過React.findDOMNode(this.refs.myInput)來存取元件的DOM。但現在，已經放棄了findDOMNode函數了，可以直接用this.refs.myInput來存取。 （想看更多就到PHP中文網React參考手冊欄位學習）

#ref回呼函數

##ref屬性也可以是一個回調函數而不是一個名字。   這個函數將要在元件被掛載之後立即執行。這個參照的元件將會作為該函數的參數，這個函數可以立即使用這個元件參數，當然也可以將其儲存以供日後使用。

其形式也比較簡單：

render: function() {

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

或是

render: function() {

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

這裡要注意，當這個參考元件被卸載且這個ref改變的時候，先前的ref的參數值將為null。這將有效的防止了內存的洩漏。所以在上面程式碼中會有if判斷：

if(input != null){

         input.focus();

}

上面介紹了ref的使用場景和方法，下面我們就將上面的例子來補充完整，從而實現獲得

焦點的功能

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

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

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

在這個範例中，render函數回傳一個;實例的描述。但是真正的實例透過this.refs。 myTextInput取得。只要渲染回傳的某個子元件有 ref="myTextInput" ，this.refs. myTextInput就會取得正確的實例。

上面就是ref的所有內容，更多關於ref的介紹可以參考Ref to Components。

本篇文章到這就結束了（想看更多就到PHP中文網
React使用手冊
欄位學習），有問題的可以在下方留言提問。

以上是React元件refs有什麼用？ react組件refs的作用及其使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！