React3 ref

前端韩某某

已于 2023-03-09 16:38:33 修改

阅读量60

点赞数

分类专栏： react 文章标签： vue.js javascript 前端

于 2023-03-06 16:45:57 首次发布

本文链接：https://blog.csdn.net/m0_65634497/article/details/129365305

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章介绍了在React中获取组件引用的几种方式，包括传统的字符串ref和回调函数方式，以及现在推荐的React.createRef()方法。字符串ref因效率问题已被弃用，回调函数可能在渲染时产生额外开销，而React.createRef()是目前官方推荐的更安全、高效的方法。

摘要由CSDN通过智能技术生成

1.跟vue 类似获取ref标签字符串的ref已经过时了(存在效率问题)

render() {
        return (
            <div>
                <input type="text" name="" ref="input1" placeholder='点击按钮提示数据'/>
                <button onClick={this.dome1}>点我提示左侧数据</button>
  
            </div>
        )
    }
    dome1 = () => {
        console.log(this.refs.input1);
    }

(还没写完,干活了)

2.回调函数使用ref c 为当前元素直接将input1 挂在到react实例上使用直接从实例上拿就行

 render() {
        return (
            <div>
                <input type="text" name="" ref={c => this.input1 = c} placeholder='点击按钮提示数据'/>
                <button onClick={this.dome1}>点我提示左侧数据</button>
            </div>
        )
    }
    dome1 = () => {
        console.log(this.input1);
        alert(this.input1.value)
    }

内联函数中的方式会在页面更新时候会调用两次第一次是null 第二次才是dom元素

这是因为在每次渲染时会创建一个新的函数实例，所以React清空旧的ref并且设置新的。通过将ref的回调函数定义成class的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

更改之后就可以避免上边问题

render() {
        return (
            <div>
                <input type="text" name="" ref={this.saveInput} placeholder='点击按钮提示数据'/>
                <button onClick={this.dome1}>点我提示左侧数据</button>
                <input ref={this.input2} onBlur={this.dome2} type="text" name="" id="" placeholder='失去焦点提示数据' />
            </div>
        )
    }
    saveInput = (c) => {
        this.input1 = c
        console.log(c);
    }
    dome1 = () => {
        alert(this.input1.value)
    }

3.React.createRef() 使用ref 目前react最推荐得一种方式

React.createRef()调用后返回一个容器该容器存储ref节点该容器只能为一个节点使用

 input2 = React.createRef()
    render() {
        return (
            <div>
                <input ref={this.input2} onBlur={this.dome2} type="text" name="" id="" placeholder='失去焦点提示数据' />
            </div>
        )
    }
    dome2 = () => {
        console.log(this.input2.current);
    }