React refs 的理解
一、是什么
Refs
在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS)
React
中的 Refs
提供了一种方式,允许我们访问 DOM
节点或在 render
方法中创建的 React
元素
本质为ReactDOM.render()
返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom
则返回的是具体的dom
节点
二、如何使用
创建ref
的形式有三种:
- 传入字符串,使用时通过 this.refs.传入的字符串的格式获取对应的元素
- 传入对象,对象是通过 React.createRef() 方式创建出来,使用时获取到创建的对象中存在 current 属性就是对应的元素
- 传入函数,该函数会在 DOM 被挂载时进行回调,这个函数会传入一个 元素对象,可以自己保存,使用时,直接拿到之前保存的元素对象即可
- 传入hook,hook是通过 useRef() 方式创建,使用时通过生成hook对象的 current 属性就是对应的元素
传入字符串
只需要在对应元素或组件中ref
属性
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref="myref" />;
}
}
访问当前节点的方式如下:
this.refs.myref.innerHTML = "hello";
传入对象
refs
通过React.createRef()
创建,然后将ref
属性添加到React
元素中,如下:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
当 ref
被传递给 render
中的元素时,对该节点的引用可以在 ref
的 current
属性中访问
const node = this.myRef.current;
传入函数
当ref
传入为一个函数的时候,在渲染过程中,回调函数参数会传入一个元素对象,然后通过实例将对象进行保存
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={element => this.myref = element} />;
}
}
获取ref
对象只需要通过先前存储的对象即可
const node = this.myref
传入hook
通过useRef
创建一个ref
,整体使用方式与React.createRef
一致
function App(props) {
const myref = useRef()
return (
<>
<div ref={myref}></div>
</>
)
}
获取ref
属性也是通过hook
对象的current
属性
const node = myref.current;
上述三种情况都是ref
属性用于原生HTML
元素上,如果ref
设置的组件为一个类组件的时候,ref
对象接收到的是组件的挂载实例
注意的是,不能在函数组件上使用ref
属性,因为他们并没有实例
三、应用场景
在某些情况下,我们会通过使用refs
来更新组件,但这种方式并不推荐,更多情况我们是通过props
与state
的方式进行去重新渲染子元素
过多使用refs
,会使组件的实例或者是DOM
结构暴露,违反组件封装的原则
例如,避免在 Dialog
组件里暴露 open()
和 close()
方法,最好传递 isOpen
属性
但下面的场景使用refs
非常有用:
- 对Dom元素的焦点控制、内容选择、控制
- 对Dom元素的内容设置及媒体播放
- 对Dom元素的操作和对组件实例的操作
- 集成第三方 DOM 库
React refs 的理解的更多相关文章
- React Refs
React Refs React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上. 这个特殊的属性允许你引用 render() 返回的相应的支撑实例( back ...
- React Refs All In One
React Refs All In One https://reactjs.org/docs/react-api.html#refs Ref https://reactjs.org/docs/refs ...
- 个人关于React的一些理解
##React背景 React是当前前端最火的框架,它的理念思想及构建方法比AngularJS更适合做webApp. 它是由facebook团队研发并开源到社区,所以它有很强大的技术背景,而且它的架构 ...
- 抛开react,如何理解virtual dom和immutability
去年以来,React的出现为前端框架设计和编程模式吹来了一阵春风.很多概念,无论是原本已有的.还是由React首先提出的,都因为React的流行而倍受关注,成为大家研究和学习的热点.本篇分享主要就聚焦 ...
- React 和 Redux理解
学习React有一段时间了,但对于Redux却不是那么理解.网上看了一些文章,现在把对Redux的理解总结如下 从需求出发,看看使用React需要什么 1. React有props和state pro ...
- 对 React Context 的理解以及应用
在React的官方文档中,Context被归类为高级部分(Advanced),属于React的高级API,但官方并不建议在稳定版的App中使用Context. 很多优秀的React组件都通过Conte ...
- 【React】360- 完全理解 redux(从零实现一个 redux)
点击上方"前端自习课"关注,学习起来~ 前言 记得开始接触 react 技术栈的时候,最难理解的地方就是 redux.全是新名词:reducer.store.dispatch.mi ...
- React/Refs and this DOM
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. 何时使用Refs 管理焦点,文本选择或媒体播放. 触发强制动画. 集成第三方 DOM 库. 避 ...
- React Hooks的理解
一.是什么 Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook,官方给出的动机是解决长时间使 ...
随机推荐
- Redis系列(五):消息队列
消息队列已经成为现在互联网服务端的标配组件,现在比较常用的消息中间件有RabbitMQ.Kafka.RocketMQ.ActiveMQ.说出来你可能不信,Redis作为一个缓存中间件,居然也提供了消息 ...
- Pandas高级教程之:Dataframe的合并
目录 简介 使用concat 使用append 使用merge 使用join 覆盖数据 简介 Pandas提供了很多合并Series和Dataframe的强大的功能,通过这些功能可以方便的进行数据分析 ...
- 广州某小公司:ThreadLocal面试
<对线面试官>系列目前已经连载24篇啦!有深度风趣的系列! [对线面试官]Java注解 [对线面试官]Java泛型 [对线面试官] Java NIO [对线面试官]Java反射 & ...
- DOS命令行(11)——更多实用的命令行工具
start 启动另一个窗口运行指定的程序或命令,所有的DOS命令和命令行程序都可以由start命令来调用.该命令不仅能运行程序,还能运行协议对应的程序 命令格式:START ["title& ...
- PING命令执行漏洞-绕过空格
目录 PING命令执行漏洞-绕过空格 这边介绍一下绕过空格的方法大概有以下几种 方法一:用变量拼接:我们发现源码中有一个$a变量可以覆盖 方法二:过滤bash?那就用sh.sh的大部分脚本都可以在ba ...
- Swagger/OpenAPI By Swashbuckle在NetCore 3.1中较NetCore 2.2使用的注意事项及入门
方案选择 使用Web API时,了解其各种方法对开发人员来说可能是一项挑战. Swagger也称为OpenAPI(Open Application Programming Interface,开放应用 ...
- 10、nginx+uwsgi+django部署(动静分离)
10.1.说明: 1.介绍: 创建Django项目,可以通过 pyhon3 manage.py runserver 0.0.0.0:8080 & 命令更方便地调试程序,但是如果当一个项目完成了 ...
- 13.9示例:有理数Rational类
要点提示:java提供了表示整数和浮点数的数据类型,但是没有提供表示有理数的数据类型. public Rational extends Number implements Comparable {}
- pixel的Edxposed刷机过程
1.先解开bl锁 这里的步骤,因为我机子本来就是解过的了,所以简单记录一下过程好了 第一步:确保你的环境变量是否设置好了,判断的标准就是打开终端(我是mac),usb连接上,然后输入 adb devi ...
- DawgCTF wp(re和crypto)
简单写写思路,想看详解的..我脚本有些丢失了..师傅请移步. 挂了个vpn,算正式打这种国际赛,全是英文.上去打了两天,昨晚晚上划水了一晚上补作业...,re那时候写出来三道,Potentially ...