React之ref詳細用法

在react典型的數據流中，props傳遞是父子組件交互的惟一方式；經過傳遞一個新的props值來使子組件從新re-render,從而達到父子組件通訊。固然，就像react官網所描述的同樣，在react典型的數據量以外，某些狀況下（例如和第三方的dom庫整合，或者某個dom元素focus等）爲了修改子組件咱們可能須要另外一種方式，這就是ref方式。

ref 簡介

React提供的這個ref屬性，表示爲對組件真正實例的引用，其實就是ReactDOM.render()返回的組件實例；須要區分一下，ReactDOM.render()渲染組件時返回的是組件實例；而渲染dom元素時，返回是具體的dom節點。

例如，下面代碼:

const domCom = <button type="button">button</button>;
    const refDom = ReactDOM.render(domCom，container);
    //ConfirmPass的組件內容省略
    const refCom = ReactDOM.render(<ConfirmPass/>,container);
    console.log(refDom);
    console.log(refCom);

上述代碼返回控制檯結果以下圖所示：。

ref能夠掛到任何組件上，能夠掛到組件上也能夠是dom元素上；兩者不一樣是與上圖答案同樣：

掛到組件（這裏組件指的是有狀態組件）上的ref表示對組件實例的引用，而掛載到dom元素上時表示具體的dom元素節點。

ref能夠設置回調函數

ref屬性能夠設置爲一個回調函數，這也是官方強烈推薦的用法；這個函數執行的時機爲：

• 組件被掛載後，回調函數被當即執行，回調函數的參數爲該組件的具體實例。

• 組件被卸載或者原有的ref屬性自己發生變化時，回調也會被當即執行，此時回調函數參數爲null，以確保內存泄露。

例以下面代碼：

RegisterStepTwo = React.createClass({
        getInitialState(){
          return {visible: true};
        },
      changeVisible(){
        this.setState({visible: !this.state.visible});
      },
      refCb(instance){
        console.log(instance);
      },
      render(){
        return(
          <div>
            <button type="button" onClick={this.changeVisible}>{this.state.visible ? '卸載' : '掛載'}ConfirmPass
            </button>
            {
              this.state.visible ?
                <ConfirmPass ref={this.refCb} onChange={this.handleChange}/>: null
             }
           </div>
         )
      }
    });

上述代碼，渲染到頁面時能夠發現console.log出對應的組件實例，切換按鈕時，ConfirmPass也在掛載與卸載之間切換，因此能看到不一樣的console.log結果。

ref能夠設置字符串

ref還能夠設置爲字符串值，而不是回調函數；這種方式基本不推薦使用，或者在將來的react版本中不會再支持該方式，可是能夠了解一下。

例以下面input設置ref的值爲字符串。

<input ref="input" />

而後在其餘地方如事件回調中經過this.refs.input能夠訪問到該組件實例，其實就是dom元素節點。

let inputEl = this.refs.input;
//而後經過inputEl來完成後續的邏輯，如focus、獲取其值等等

獲取ref引用組件對應的dom節點

無論ref設置值是回調函數仍是字符串，均可以經過ReactDOM.findDOMNode(ref)來獲取組件掛載後真正的dom節點。

可是對於html元素使用ref的狀況，ref自己引用的就是該元素的實際dom節點，無需使用ReactDOM.findDOMNode(ref)來獲取，該方法經常使用於React組件上的ref。

ref在有狀態組件中的使用

上文說到過ref用到react有狀態組件時，ref引用的是組件的實例；因此能夠經過子組件的ref能夠訪問到子組件實例的props、state、refs、實例方法(非繼承而來的方法)等等。

使用ref訪問子組件狀況多是如下case：

• 訪問子組件的某個具體的dom節點完成某些邏輯，經過this.refs.childComponentRefName.refs.someDomRefName來完成，例如segmentfault上提問者提出的問題。

• 能夠訪問子組件的公共實例方法完成某寫邏輯。例如子組件定義了一個reset方法用來重置子組件表單元素值，這時父組件能夠經過this.refs.childComponentRefName.reset()來完成子組件表單元素的重置。

• ...

不過話說回來，react不建議在父組件中直接訪問子組件的實例方法來完成某些邏輯，在大部分狀況下請使用標準的react數據流的方式來代替則更爲清晰；

另外，上述case在組件關係嵌套很深時，這種方式就顯得極爲醜陋。

ref在無狀態組件中的使用

上文說到的react組件都是指有狀態的，對於無狀態組件stateless component而言，正如這篇文章React建立組件的三種方式及其區別裏描述的同樣，無狀態組件是不會被實例化的，在父組件中經過ref來獲取無狀態子組件時，其值爲null，因此：

沒法經過ref來獲取無狀態組件實例。

雖然沒法經過ref獲取無狀態組件實例，可是能夠結合複合組件來包裝無狀態組件來在其上使用ref引用。

另外，對於無狀態組件咱們想訪問的無非是其中包含的組件或者dom元素，咱們能夠經過一個變量來保存咱們想要的組件或者dom元素組件的實例引用。例以下面代碼：

function TestComp(props){
    let refDom;
    return (<div>
        <div ref={(node) => refDom = node}>
            ...
        </div>
    </div>)
}

這樣，能夠經過變量refDom來訪問到無狀態組件中的指定dom元素了，訪問其中的其餘組件實例相似。

ref在HOC中存在問題

react的HOC是高階組件，簡單理解就是包裝了一個低階的組件，最後返回一個高階的組件；高階組件實際上是在低階組件基礎上作了一些事情，比方說antd組件的Form create的方法，它就是在爲低階組件封裝了一些特殊的屬性，好比form屬性。

既然HOC會基於低階組件生成一個新的高階組件，若用ref就不能訪問到咱們真正須要的低階組件實例，咱們訪問到的實際上是高階組件實例。因此:

若HOC不作特殊處理，ref是沒法訪問到低階組件實例的

要想用ref訪問低階組件實例，就必須得HOC支持，就像Redux的connect方法提供的withRef屬性來訪問低階組件同樣。具體能夠參考這裏。

總結

ref提供了一種對於react標準的數據流不太適用的狀況下組件間交互的方式，例如管理dom元素focus、text selection以及與第三方的dom庫整合等等。 可是在大多數狀況下應該使用react響應數據流那種方式，不要過分使用ref。

另外，在使用ref時，不用擔憂會致使內存泄露的問題，react會自動幫你管理好，在組件卸載時ref值也會被銷燬。

最後補充一點：

不要在組件的render方法中訪問ref引用，render方法只是返回一個虛擬dom，這時組件不必定掛載到dom中或者render返回的虛擬dom不必定會更新到dom中。

參考

• Refs and the DOM

• React從入門到精通系列之(14)refs和DOM元素

• 對組件的引用（refs）