当前位置: 首页 > news >正文

说说对React refs 的理解?应用场景?

先了解,是什么?

React 中的 Refs提供了一种方式,允许我们访问 DOM节点或在 render方法中创建的 React元素。
本质为ReactDOM.render()返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点。

如何去使用?


传入字符串,使用时通过 this.refs.传入的字符串的格式获取对应的元素
传入对象,对象是通过 React.createRef() 方式创建出来,使用时获取到创建的对象中存在 current 属性就是对应的元素
传入函数,该函数会在 DOM 被挂载时进行回调,这个函数会传入一个 元素对象,可以自己保存,使用时,直接拿到之前保存的元素对象即可
传入hook,hook是通过 useRef() 方式创建,使用时通过生成hook对象的 current 属性就是对应的元素

使用场景


在某些情况下,我们会通过使用refs来更新组件,但这种方式并不推荐,过多使用refs,会使组件的实例或者是DOM结构暴露,违反组件封装的原则;

但下面的场景使用refs非常有用:

对Dom元素的焦点控制、内容选择、控制
对Dom元素的内容设置及媒体播放
对Dom元素的操作和对组件实例的操作
集成第三方 DOM 库
 

http://www.lryc.cn/news/266390.html

相关文章:

  • Pytorch 读取t7文件
  • 【YOLOV8预测篇】使用Ultralytics YOLO进行检测、分割、姿态估计和分类实践
  • [Linux] MySQL数据库之索引
  • 【期末考试】计算机网络、网络及其计算 考试重点
  • 力扣labuladong——一刷day79
  • 【数据结构入门精讲 | 第十篇】考研408排序算法专项练习(二)
  • 【ES实战】Elasticsearch6开始的CCR
  • Deployment Pay
  • MySQL创建member表失败
  • 使用minio实现大文件断点续传
  • 插入排序之C++实现
  • Tomcat日志乱码了怎么处理?
  • [node] Node.js的路由
  • 网络编程第三天作业
  • AIGC:大语言模型LLM的幻觉问题
  • 【C语言刷题每日一题#牛客网BC68】——X形图案
  • 阻断血缘关系以及checkpoint文件清理
  • PHP代码审计之反序列化攻击链CVE-2019-6340漏洞研究
  • PyTorch之线性回归
  • SSTI模板注入基础(Flask+Jinja2)
  • React网页转换为pdf并下载|使用jspdf html2canvas
  • EASYEXCEL导出表格(有标题、单元格合并)
  • pytest 断言异常
  • 听GPT 讲Rust源代码--src/tools(22)
  • OD Linux发行版本
  • 华为端口隔离简单使用方法同vlan下控制个别电脑不给互通
  • DaVinci各版本安装指南
  • 【黑马甄选离线数仓day10_会员主题域开发_DWS和ADS层】
  • OD 完美走位
  • SpringSecurity6 | 失败后的跳转