React提供的這個ref屬性，表示為對組件真正實例的引用时捌，其實就是ReactDOM.render()返回的組件實例；
- ReactDOM.render()渲染組件時返回的是組件實例；
- 渲染dom元素時逗威，返回是具體的dom節(jié)點蚌讼。
ref可以掛載到組件上也可以是dom元素上辟灰；
- 掛到組件(
class聲明的組件)上的ref表示對組件實例的引用。不能在函數(shù)式組件上使用 ref 屬性篡石，因為它們沒有實例： - 掛載到dom元素上時表示具體的dom元素節(jié)點芥喇。
Q：ref屬性可以設(shè)置為一個回調(diào)函數(shù)
React 支持給任意組件添加特殊屬性。ref 屬性接受一個回調(diào)函數(shù)凰萨，它在組件被加載或卸載時會立即執(zhí)行继控。
- 當(dāng)給 HTML 元素添加 ref 屬性時械馆，ref 回調(diào)接收了底層的 DOM 元素作為參數(shù)。
- 當(dāng)給組件添加 ref 屬性時武通，ref 回調(diào)接收當(dāng)前組件實例作為參數(shù)霹崎。
- 當(dāng)組件卸載的時候，會傳入null
- ref 回調(diào)會在componentDidMount 或 componentDidUpdate 這些生命周期回調(diào)之前執(zhí)行冶忱。
Q：當(dāng)給組件尾菇、H5標簽添加 ref 屬性后，此實例只能在當(dāng)前組件中被訪問到朗和，父組件的 refs 中是沒有此引用的错沽，例如：
var Parent = React.createClass({
render: function(){
return (
<div className = 'parent'>
<Child ref = 'child'/>
</div>
)
},
componentDidMount(){
console.log(this.refs.child); // 訪問掛載在組件上ref
console.log(this.refs.child.refs.update); // 訪問掛載在dom元素上的ref
}
})
var Child = React.createClass({
render: function() {
return (
<div ref="test">
<a ref="update">更新</a>
</div>
);
}
});
ReactDOM.render(
<Parent/>,
document.getElementById('example')
);
image.png
- 給 h5 元素設(shè)置 ref
<a ref="update">更新</a>后，可以拿到它的真實 dom<a>更新</a>眶拉。 - 給組件設(shè)置ref
<Child ref = 'child'/>后千埃，拿到的是組件的實例(上圖中的Constructor)
Q：獲取ref引用組件對應(yīng)的dom節(jié)點
不管ref設(shè)置值是回調(diào)函數(shù)還是字符串，都可以通過ReactDOM.findDOMNode(ref)來獲取組件掛載后真正的dom節(jié)點忆植。
image.png
image.png
但是對于html元素使用ref的情況放可，ref本身引用的就是該元素的實際dom節(jié)點，無需使用ReactDOM.findDOMNode(ref)來獲取朝刊，該方法常用于React組件上的ref耀里。
Q：this.refs 和 ReactDOM.findDOMNode的區(qū)別
- ref添加到Compoennt上獲取的是Compoennt實例，添加到原生HTML上獲取的是DOM拾氓；
-
ReactDOM.findDOMNode冯挎，當(dāng)參數(shù)是DOM，返回值就是該DOM咙鞍；當(dāng)參數(shù)是Component獲取的是該Component render方法中的DOM - 二者主要區(qū)別在ref綁定在組件上的時候房官，
this.refs獲取到的是組件實例，ReactDOM.findDOMNode獲取到的是dom節(jié)點续滋。
Q：新版本的React已經(jīng)不推薦我們使用ref string轉(zhuǎn)而使用ref callback
<Child ref={child => this._child = child}/>
console.log(ReactDOM.findDOMNode(this._child))
