React Ref使用方法解析

在寫React時在有些必要的情況下,我們可能需要讓父元件獲取子元件的整個DOM或者是直接獲取某個DOM節點來取得一些特定的資料,React為了解決這個問題所提供的屬性就是ref。

Ref

在學習怎麼正確使用Ref之前要先了解一些觀念,Ref這個屬性雖然能讓你簡單地獲取DOM節點,可是在React中所提倡的是數據流的概念,透過props讓父元件傳遞資料給子元件或者是使用state來讓元件儲存資料,Ref比較被建議在一些特定情況再來使用,一旦你需要使用到ref都最好先思考自己所設計的元件還有沒有改善空間,是不是能將state拉到更高層次的父元件之類的,到最好再來考慮使用refs。

為什麼不要太常使用Ref

使用ref直接操控Dom的確是快速簡單地處理方式,但如果組件變多的話呢?
在短期來看ref的確很好用,但是在長期對於組件的管理,其實這種方式非常不恰當,就好像傳統用Jquery操控DOM,寫了一大堆之後要管理會非常的難,所以透過State & Props來管理組件才是React唯一的解。

幾個適合使用ref的情形

當然也不是叫你完全不要使用ref,畢竟提供這屬性就一定有他用得到的地方,在React官方文件裡面有列出幾個特定情況下才建議你使用ref這個屬性

  • Managing focus, text selection, or media playback.
  • Integrating with third-party DOM libraries.
  • Triggering imperative animations.

Ref使用方法

ref的使用方法其實有兩種,一種是使用String屬性另外一種則是用callback function的方式,但是ref String屬性這種方式,React官方已經建議不要再使用它,而且可能會在未來的新版本將這種方式拿掉,取而代之的就是使用callback funcion,所以基本上現在要學的話,直接學callback function就好。

Ref Callback 屬性

在使用ref的時候可以簡單分為兩個情況,一種是元件要直接存取dom元素,另一種則是父元件要直接存取整個子元件的DOM。

元件存取DOM

在這邊將ref設置了一個callback function來讓this.textInput這個值指向input這個dom元素,當button進行點擊的時候就對this.textInput進行操控,基本上元件要透過ref得到DOM節點就是這麼簡單。

父組件獲取子組件的DOM

在這邊我把上面那個變為子組件cusomTextInput,然後一樣將這個子組件設置一個ref,然後整個dom指定給this.customTextInput,要讓父組件取用子組件的某個dom元素,就把子組件的dom元素設置一個ref,然後接在this.cusomTextInput.(子組件的ref),這樣就能讓父組件存取子組件的DOM 了。