React总结11：ref的用法

之前对ref用法的了解一直仅限于如下：

<input ref="input" />

然后在其他地方如事件回调中通过this.refs.input可以访问到该组件实例，其实就是dom元素节点。

let inputEl = this.refs.input;//然后通过inputEl来完成后续的逻辑，如focus、获取其值等等

大多数教程上指明的用法都如上，其实这种方式基本不推荐使用，或者在未来的react版本中不会再支持该方式。

ref的另一种用法是传入回调函数：
这也是官方强烈推荐的用法；这个函数执行的时机为：
1.组件被挂载后，回调函数被立即执行，回调函数的参数为该组件的具体实例。
2.组件被卸载或者原有的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结果。