在react典型的資料流中，props傳遞是父子元件互動的唯一方式；通過傳遞乙個新的props值來使子元件重新re-render,從而達到父子元件通訊。當然，就像react官網所描述的一樣，在react典型的資料量之外，某些情況下（例如和第三方的dom庫整合，或者某個dom元素focus等）為了修改子元件我們可能需要另一種方式，這就是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元素節點。例如下面**：
registersteptwo = react.createclass(;上述**，渲染到頁面時可以發現console.log出對應的元件例項，切換按鈕時，},changevisible());
},refcb(instance),
render()
>
confirmpass
button
>
onchange
=/>
: null
}div>
) }
});
confirmpass也在掛載與解除安裝之間切換，所以能看到不同的console.log結果。
ref還可以設定為字串值，而不是**函式；這種方式基本不推薦使用，或者在未來的react版本中不會再支援該方式，但是可以了解一下。
例如下面input設定ref的值為字串。
<然後在其他地方如事件**中通過input
ref="input"
/>
this.refs.input可以訪問到該元件例項，其實就是dom元素節點。
let inputel = this.refs.input;不管ref設定值是**函式還是字串，都可以通過//然後通過inputel來完成後續的邏輯，如focus、獲取其值等等
reactdom.finddomnode(ref)來獲取元件掛載後真正的dom節點。
但是對於html元素使用ref的情況，ref本身引用的就是該元素的實際dom節點，無需使用reactdom.finddomnode(ref)來獲取，該方法常用於react元件上的ref。
上文說到過ref用到react有狀態元件時，ref引用的是元件的例項；所以可以通過子元件的ref可以訪問到子元件例項的props、state、refs、例項方法(非繼承而來的方法)等等。
使用ref訪問子元件情況可能是以下case：
不過話說回來，react不建議在父元件中直接訪問子元件的例項方法來完成某些邏輯，在大部分情況下請使用標準的react資料流的方式來代替則更為清晰；
另外，上述case在元件關係巢狀很深時，這種方式就顯得極為醜陋。
上文說到的react元件都是指有狀態的，對於無狀態元件stateless component而言，正如這篇文章react建立元件的三種方式及其區別裡描述的一樣，無狀態元件是不會被例項化的，在父元件中通過ref來獲取無狀態子元件時，其值為null，所以：
無法通過ref來獲取無狀態元件例項。
雖然無法通過ref獲取無狀態元件例項，但是可以結合復合元件來包裝無狀態元件來在其上使用ref引用。
另外，對於無狀態元件我們想訪問的無非是其中包含的元件或者dom元素，我們可以通過乙個變數來儲存我們想要的元件或者dom元素元件的例項引用。例如下面**：
function testcomp(props)>這樣，可以通過變數...div>
div>
)}
refdom來訪問到無狀態元件中的指定dom元素了，訪問其中的其他元件例項類似。
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中。
react 元件樣式 ref標記
語法練習 小總結元件就是乙個個頁面，裡面放html 思考 元件樣式寫在哪？回答 通過link匯入或者寫style 標籤名 style 該語法可以獲取js元素物件vue中實 用 this.refs.標識 建構函式 dom已經被渲染 componentdidmount inputobj type tex...
React元件通訊 REF屬性
乙個 ref 例項在建構函式中建立，並賦值給 this.firstref this.firstref react.createref 等同於 在 render 方法內部，將建構函式中建立的 ref 傳遞給 div 處理dom元素 this.firstref.current dom元素.this.例項...
React中ref的使用
res引用的意思，用來獲取元素的dom，官方並不推薦 react新特性中res等於乙個函式，這個函式會自動接收乙個引數。這是代表構建了乙個ref，通過this.input來指向 input dom節點 之前使用e.target.value來獲取input值，現在通過ref引用的this.input來...