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 提供了一種對于react標準的數據流不太適用的情況下組件間交互的方式，例如管理dom元素focus、text selection以及與第三方的dom庫整合等等。 但是在大多數情況下應該使用react響應數據流那種方式，不要過度使用ref。
另外，在使用ref時，不用擔心會導致內存泄露的問題，react會自動幫你管理好，在組件卸載時ref值也會被銷毀。
最后補充一點：
不要在組件的 render 方法中訪問 ref 引用， render 方法只是返回一個虛擬dom，這時組件不一定掛載到dom中或者render返回的虛擬dom不一定會更新到dom中。
參考
來自：http://www.cnblogs.com/wonyun/p/6395849.html