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结果。