React ref的定义方式

有三种定义方式：

1.字符串的形式，但是官方不推荐使用，会存在一些效率问题，已经过时的使用方法，未来版本可能会移除

class Demo extends React.Component{
    render(){
        <input ref="input1"/>
    }

}

2.回调函数的方式

class Demo extends React.Component{
    const {input2} = this
    render(){
        <input ref={node=>this.input2=node}/>
    }

}

以上内联回调写法在组件更新时，会执行两次，第一次传入null，第二次传入node节点，所以React清空旧的ref并设置新的，避免此情况可写成class的绑定函数：

class Demo extends React.Component{
    const saveInput2 = (node)=>{
        this.input2 = node
    }
    render(){
        <input ref={this.saveInput}/>
    }

}

但实际情况无关紧要，两种都可以

3.React.createRef()，调用后可以返回一个容器，该容器可以存储被ref所标识的节点，但是这个方式专人专用，每个创建的容器只能对应一个，如果绑定了多个，那么最后一个元素绑定有效。

class Demo extends React.Component{
    myRef = React.createRef()
    const showRef = ()=>{
        //读取数据
        let myRef = this.myRef.current.value
    }
    render(){
        <input ref={this.myRef}/>
        <button>查看</button>
    }
}