ref使用详解

Posted 2022-05-28 一杯清泉

一、字符串形式的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，会引发性能问题。