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在HOC中存在问题

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中。

参考

• Refs and the DOM

• React从入门到精通系列之(14)refs和DOM元素

• 对组件的引用（refs）