React之ref

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))