文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React中ref属性的示例分析

2023-06-15 02:30

关注

这篇文章主要介绍了React中ref属性的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

概述

首先,Refs 和 ref 是两个概念,Refs 是 React 提供的可用特定 API 创建的一个对象。该对象的结构如下:

React中ref属性的示例分析

这个对象只有一个属性就是 current ,那么这个对象是用来干嘛的呢?

Refs 允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。(DOM节点就是指原生DOM元素,在render()方法中创建的 React 元素就是指 React 的类组件元素)

我们可以想象这样一个需求,两个兄弟元素,一个是 div ,一个是 button。现在想实现点击 button,改变 div 的背景颜色。在原生的 DOM 技术中,我们可以在 button 的点击函数里使用 document.querySelector('xxx') 的方式选中 div 节点,然后改变其背景样式。但是无论是在 Vue 还是 React 这样的框架中,页面元素都是动态生成的,无法使用 DOM API 获取的方式。而且 React 中大部分操作的元素不是 原生DOM元素,而是 React 元素。 那么如何选择到某一个 原生DOM元素 或者 React 元素呢?

其实,理论上,我们不需要进行任何的选择操作,这样会失去前端框架中组件独立的概念。一般情况下是通过 组件通信 的方式进行事件的处理的。上述的情况可以使用 EventBus 的方式进行组件通信,button 的点击事件中进行自定义事件的触发,在 div 中进行自定义事件的监听,让 button 以事件通知的方式告知 div 让其改变背景色,而不是在 button 的事件中直接获取 div 进行操作。

但是 React 为我们提供了直接访问 DOM元素 和 React 元素的方式,就是通过 Refs。使用的方式很简单,就是,为想要访问的元素上添加 ref 属性,将 Refs 对象附加到 ref 属性上,那么此时 Refs 对象的 current 属性就不再是空,而是对应的 DOM元素 或 React 元素实例了。

1. Refs 对象的创建

在 React 中,创建 Ref 对象的方式有两种:

1.1 React.createRef()

使用 React.createRef() 的方式可以创建一个 Ref 对象,可通过附加到 ref 属性上访问一个 原生DOM元素 或者 class 组件。
这种方式既可以在函数组件中使用,也可以在class组件中使用。

1.2 React.useRef(initialValue)

在 React 16.8 中新增了 Hook 后,又多了一个可以创建 Ref 对象的 Hook。即 React.useRef(initialValue)。
useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。
这种方式只能在函数组件中使用。

2. ref 属性的使用

ref 属性只能被添加到 原生DOM元素 或者 React的 class 组件上。不能在 函数组件 上使用 ref 属性,因为函数组件没有实例。

若想在函数组件上使用 ref 属性,可以通过 React.forwardRef 将 Ref 转发到函数组件内部的 原生 DOM 元素上。

2.1 为原生DOM元素添加 ref

class类组件内部

class App extends React.Component{    constructor(props){        super(props)        this.myRef = React.createRef()    }     componentDidMount(){        console.log(this.myRef)        console.log(this.myRef.current)    }    render(){        return (            <div ref={this.myRef}>我是App组件</div>        )    }}

React中ref属性的示例分析

函数组件内部

const App = ()=>{    const myRef = React.useRef(null)    //const myRef = React.createRef() 两种创建 ref 对象的方式都可以    React.useEffect(()=>{        console.log(myRef)        console.log(myRef.current)    },[]) //模拟生命周期    return (        <div ref={myRef}>我是函数组件内部使用ref的div</div>    )}

React中ref属性的示例分析

2.2 为class组件添加 ref

class ClassChild extends React.Component{    render(){        return (            <div>我是App组件的 class 子组件 ClassChild</div>        )    }}class App extends React.Component{    constructor(props){        super(props)        this.myRef = React.createRef()    }     componentDidMount(){        console.log(this.myRef)        console.log(this.myRef.current)    }    render(){        return (            <ClassChild ref={this.myRef}/>        )    }}

React中ref属性的示例分析

2.3 为class组件转发的原生DOM元素添加 ref

ref 转发原理就是将父组件中定义的 ref 对象当作普通属性的方式传递给子组件,然后子组件通过 props 接收再赋值给自己 DOM元素 上。

class ClassChild extends React.Component{    render(){        return (            <div ref={this.props.refProp}>我是App组件的 class 子组件 ClassChild</div> //添加了 ref        )    }}class App extends React.Component{    constructor(props){        super(props)        this.myRef = React.createRef()    }     componentDidMount(){        console.log(this.myRef)        console.log(this.myRef.current)    }    render(){        return (            <ClassChild refProp={this.myRef}/> //作为普通属性传递        )    }}

React中ref属性的示例分析

2.4 为函数组件转发的原生DOM元素添加 ref

根据class类组件转发的原理,我想到的实现方法如下:

const FunChild = (props)=>{    return (        <div ref={props.refProp}>我是函数组件 FunChild</div>    )}class App extends React.Component{    constructor(props){        super(props)        this.myRef = React.createRef()    }     componentDidMount(){        console.log(this.myRef)        console.log(this.myRef.current)    }    render(){        return (            <FunChild refProp={this.myRef}/>        )    }}

React中ref属性的示例分析

这种实现方式是可以的,但这不是在 函数组件 上直接使用 ref 属性的方式,React 提供了在函数组件上直接使用 ref 的方式,就是使用 React.forwardRef 创建 React 元素。

React.forwardRef

const FunChild = React.forwardRef((props, ref)=>{    return (        <div ref={ref}>我是函数组件 FunChild</div>    )}) // 使用 React.forwardRef 改造函数组件class App extends React.Component{    constructor(props){        super(props)        this.myRef = React.createRef()    }     componentDidMount(){        console.log(this.myRef)        console.log(this.myRef.current)    }    render(){        return (            <FunChild ref={this.myRef}/>  //直接给函数组件传递 ref        )    }}

React中ref属性的示例分析

感觉 React.forwardRef 就是把 ref 属性单独从 props 中抽离出来了。
尽管上述方式实现了在函数组件上使用 ref 属性,但此时的 Ref 对象是访问的函数组件内部的 原生DOM元素 或其他 class组件。也就是说,在这里函数组件只是起到了一个转发的作用。

3. 回调 Refs

上述的方式中,我们都是通过创建一个 Ref 对象,通过 ref 属性的方式挂载到 原生DOM元素 或者 class 组件上用于访问该元素或实例。
实际上,ref 属性除了可以接收一个 Ref 对象外,还可以接收一个回调函数。
当 ref 属性接收 Ref 对象时,会将其对应的 DOM元素 或者 class组件实例 直接赋值给 Ref 对象中的 current 属性上。而当 ref 属性接收一个回调函数时,会将其对应的 DOM元素 或 class组件实例作为回调函数的参数调用回调函数。
因此我们可以通过回调 Refs 的方式不依靠 Ref 对象,更灵活地控制要访问的元素或实例。

class App extends React.Component{    constructor(props){        super(props)        this.myRef = null        this.setMyRef = (element)=>{            this.myRef = element        }    }     componentDidMount(){        console.log(this.myRef)    }    render(){        return (            <div ref={this.setMyRef}>我是App组件</div>        )    }}

React中ref属性的示例分析

感谢你能够认真阅读完这篇文章,希望小编分享的“React中ref属性的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯