react中ref有什么用

這篇文章給大家分享的是有關(guān)react中ref有什么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

ref是React提供的用來操縱React組件實(shí)例或者DOM元素的接口；回調(diào)函數(shù)就是在dom節(jié)點(diǎn)或組件上掛載函數(shù)，函數(shù)的入?yún)⑹莇om節(jié)點(diǎn)或組件實(shí)例，達(dá)到的效果與字符串形式是一樣的，都是獲取其引用。

在react典型的數(shù)據(jù)流中，props傳遞是父子組件交互的唯一方式；通過傳遞一個新的props值來使子組件重新re-render,從而達(dá)到父子組件通信。當(dāng)然，就像react官網(wǎng)所描述的一樣，在react典型的數(shù)據(jù)量之外，某些情況下（例如和第三方的dom庫整合，或者某個dom元素focus等）為了修改子組件我們可能需要另一種方式，這就是ref方式。

ref 簡介

React提供的這個ref屬性，表示為對組件真正實(shí)例的引用，其實(shí)就是ReactDOM.render()返回的組件實(shí)例；需要區(qū)分一下，ReactDOM.render()渲染組件時(shí)返回的是組件實(shí)例；而渲染dom元素時(shí)，返回是具體的dom節(jié)點(diǎn)。

例如，下面代碼:

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

上述代碼返回控制臺結(jié)果如下圖所示：

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

掛到組件（這里組件指的是有狀態(tài)組件）上的ref表示對組件實(shí)例的引用，而掛載到dom元素上時(shí)表示具體的dom元素節(jié)點(diǎn)。

ref可以設(shè)置回調(diào)函數(shù)

ref屬性可以設(shè)置為一個回調(diào)函數(shù)，這也是官方強(qiáng)烈推薦的用法；這個函數(shù)執(zhí)行的時(shí)機(jī)為：

• 組件被掛載后，回調(diào)函數(shù)被立即執(zhí)行，回調(diào)函數(shù)的參數(shù)為該組件的具體實(shí)例。

• 組件被卸載或者原有的ref屬性本身發(fā)生變化時(shí)，回調(diào)也會被立即執(zhí)行，此時(shí)回調(diào)函數(shù)參數(shù)為null，以確保內(nèi)存泄露。

相關(guān)推薦：《react教程》

例如下面代碼：

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

上述代碼，渲染到頁面時(shí)可以發(fā)現(xiàn)console.log出對應(yīng)的組件實(shí)例，切換按鈕時(shí)，ConfirmPass也在掛載與卸載之間切換，所以能看到不同的console.log結(jié)果。

ref可以設(shè)置字符串

ref還可以設(shè)置為字符串值，而不是回調(diào)函數(shù)；這種方式基本不推薦使用，或者在未來的react版本中不會再支持該方式，但是可以了解一下。

例如下面input設(shè)置ref的值為字符串。

<input ref="input" />

然后在其他地方如事件回調(diào)中通過this.refs.input可以訪問到該組件實(shí)例，其實(shí)就是dom元素節(jié)點(diǎn)。

let inputEl = this.refs.input;
//然后通過inputEl來完成后續(xù)的邏輯，如focus、獲取其值等等

獲取ref引用組件對應(yīng)的dom節(jié)點(diǎn)

不管ref設(shè)置值是回調(diào)函數(shù)還是字符串，都可以通過ReactDOM.findDOMNode(ref)來獲取組件掛載后真正的dom節(jié)點(diǎn)。

但是對于html元素使用ref的情況，ref本身引用的就是該元素的實(shí)際dom節(jié)點(diǎn)，無需使用ReactDOM.findDOMNode(ref)來獲取，該方法常用于React組件上的ref。

ref在有狀態(tài)組件中的使用

上文說到過ref用到react有狀態(tài)組件時(shí)，ref引用的是組件的實(shí)例；所以可以通過子組件的ref可以訪問到子組件實(shí)例的props、state、refs、實(shí)例方法(非繼承而來的方法)等等。

使用ref訪問子組件情況可能是以下case：

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

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

• ...

不過話說回來，react不建議在父組件中直接訪問子組件的實(shí)例方法來完成某些邏輯，在大部分情況下請使用標(biāo)準(zhǔn)的react數(shù)據(jù)流的方式來代替則更為清晰；

另外，上述case在組件關(guān)系嵌套很深時(shí)，這種方式就顯得極為丑陋。

ref在無狀態(tài)組件中的使用

上文說到的react組件都是指有狀態(tài)的，對于無狀態(tài)組件stateless component而言，正如這篇文章React創(chuàng)建組件的三種方式及其區(qū)別里描述的一樣，無狀態(tài)組件是不會被實(shí)例化的，在父組件中通過ref來獲取無狀態(tài)子組件時(shí)，其值為null，所以：

無法通過ref來獲取無狀態(tài)組件實(shí)例。

雖然無法通過ref獲取無狀態(tài)組件實(shí)例，但是可以結(jié)合復(fù)合組件來包裝無狀態(tài)組件來在其上使用ref引用。

另外，對于無狀態(tài)組件我們想訪問的無非是其中包含的組件或者dom元素，我們可以通過一個變量來保存我們想要的組件或者dom元素組件的實(shí)例引用。例如下面代碼：

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

這樣，可以通過變量refDom來訪問到無狀態(tài)組件中的指定dom元素了，訪問其中的其他組件實(shí)例類似。

ref在HOC中存在問題

react的HOC是高階組件，簡單理解就是包裝了一個低階的組件，最后返回一個高階的組件；高階組件其實(shí)是在低階組件基礎(chǔ)上做了一些事情，比方說antd組件的Form create的方法，它就是在為低階組件封裝了一些特殊的屬性，比如form屬性。

既然HOC會基于低階組件生成一個新的高階組件，若用ref就不能訪問到我們真正需要的低階組件實(shí)例，我們訪問到的其實(shí)是高階組件實(shí)例。所以:

若HOC不做特殊處理，ref是無法訪問到低階組件實(shí)例的

要想用ref訪問低階組件實(shí)例，就必須得HOC支持，就像Redux的connect方法提供的withRef屬性來訪問低階組件一樣。具體可以參考這里。

總結(jié)

ref提供了一種對于react標(biāo)準(zhǔn)的數(shù)據(jù)流不太適用的情況下組件間交互的方式，例如管理dom元素focus、text selection以及與第三方的dom庫整合等等。 但是在大多數(shù)情況下應(yīng)該使用react響應(yīng)數(shù)據(jù)流那種方式，不要過度使用ref。

另外，在使用ref時(shí)，不用擔(dān)心會導(dǎo)致內(nèi)存泄露的問題，react會自動幫你管理好，在組件卸載時(shí)ref值也會被銷毀。

最后補(bǔ)充一點(diǎn)：

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

感謝各位的閱讀！關(guān)于“react中ref有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！