React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；
- ReactDOM.render()渲染组件时返回的是组件实例；
- 渲染dom元素时，返回是具体的dom节点。
ref可以挂载到组件上也可以是dom元素上；
- 挂到组件(
class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例： - 挂载到dom元素上时表示具体的dom元素节点。
Q：ref属性可以设置为一个回调函数
React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。
- 当给 HTML 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数。
- 当给组件添加 ref 属性时，ref 回调接收当前组件实例作为参数。
- 当组件卸载的时候，会传入null
- ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。
Q：当给组件、H5标签添加 ref 属性后，此实例只能在当前组件中被访问到，父组件的 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 元素设置 ref
<a ref="update">更新</a>后，可以拿到它的真实 dom<a>更新</a>。 - 给组件设置ref
<Child ref = 'child'/>后，拿到的是组件的实例(上图中的Constructor)
Q：获取ref引用组件对应的dom节点
不管ref设置值是回调函数还是字符串，都可以通过ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点。
image.png
image.png
但是对于html元素使用ref的情况，ref本身引用的就是该元素的实际dom节点，无需使用ReactDOM.findDOMNode(ref)来获取，该方法常用于React组件上的ref。
Q：this.refs 和 ReactDOM.findDOMNode的区别
- ref添加到Compoennt上获取的是Compoennt实例，添加到原生HTML上获取的是DOM；
-
ReactDOM.findDOMNode，当参数是DOM，返回值就是该DOM；当参数是Component获取的是该Component render方法中的DOM - 二者主要区别在ref绑定在组件上的时候，
this.refs获取到的是组件实例，ReactDOM.findDOMNode获取到的是dom节点。
Q：新版本的React已经不推荐我们使用ref string转而使用ref callback
<Child ref={child => this._child = child}/>
console.log(ReactDOM.findDOMNode(this._child))
