ref使用详解

一、字符串形式的ref（官方已过时）

        ref可以理解成打一个标识，类似于一个id，最终会收集到this对象的refs里面。

<input ref='input1' type='text' placeholder='输入内容点击按钮' />
<button onClick={this.showData}>点我提示</button>
<input ref='input2' onBlur={this.showData2} type='text' placeholder='移除光标焦点' /

//左侧输入框的数据
showData = () => {
    //虚拟dmo转成真实dom真正的节点，可以获取任意属性
    console.log(this.refs.input1);
    console.log(this.refs.input1.value);
    alert(this.refs.input1.value)
}
//右侧输入框的数据
showData2 = () => {
    //虚拟dmo转成真实dom真正的节点，可以获取任意属性
    console.log(this.refs.input2);
    const { input2 } = this.refs
    alert(input2.value)
} 

二、回调函数形式的ref（常用）

        字符串形式的ref效果不高，已经被废弃，未来会被移除。常用的输入下：

 {/*this指的是render上下文，将该标签节点挂载在实例自己上赋值给input1变量*/}
<input ref={(e) => { this.input1 = e }} type='text' placeholder='输入内容点击按钮' />
<button onClick={this.showData}>点我提示</button>
<input ref={(e) => this.input2 = e} onBlur={this.showData2} type='text' placeholder='移除光标焦点' />

//左侧输入框的数据
showData = () => {
    console.log(this.input1);
    alert(this.input1.value)
}
//右侧输入框的数据
showData2 = () => {
    console.log(this.input2);
    const {input2} = this
    alert(input2.value)
}

        关于回调 refs 的说明：

        以上方法在大多数情况下它是无关紧要的，开发中比较常用，但是在配合state有一点小影响影响可以忽略，除非比较关心： 参考 Refs and the DOM – React，最后一行，关于回调 refs 的说明。优化如下

<input ref={this.saveInput} type='text' placeholder='输入内容点击按钮' />
<button onClick={this.showData}>点我提示</button>

showData = () => {
    const { input1 } = this
    console.log(input1);
    alert(input1.value)
}

saveInput = (e) => {
    this.input1 = e;
    console.log(e);
}

三、creactRef方式创建ref（最新）

class MyComponent extends React.Component {

    /**
     * React.creactRef可以返回一个容器，该容器可以存储被ref所标识的节点，有几个组件、标签的ref就需要几个createRef创建，
     * 不能共用一个，多个标签添加一个后加的的覆盖之前加的，几个标签创建一个ref。
     **/
    myRef1 = React.createRef();
    myRef2 = React.createRef();

    render() {
        return (
            <div>
                {/*当执行的时候发现myRef是由createRef创建的，会把这个节点加入到容器中*/}
                <input ref={this.myRef1} type='text' placeholder='输入内容点击按钮' />
                <button onClick={this.showData}>点我提示</button>
                <input ref={this.myRef2} onBlur={this.showData2} type='text' placeholder='移除光标焦点' />
            </div>
        )
    }

    showData = () => {
        alert(this.myRef1.current.value);
    }

    showData2 = () => {
        alert(this.myRef1.current.value);
    }
}

        不推荐大量的使用ref，会引发性能问题。