React 第十五章 Ref

React ref 是 React 中一个用于访问组件中 DOM 元素或者类实例的方式。它允许我们直接操作 DOM,而不需要通过 state 或 props 来更新组件。

过时 APIString 类型的 Refs

在最最早期的时候,ReactRef 的用法非常简单,类似于 Vue,给一个字符串类型的值,之后在方法中通过 this.refs.xxx 就能够引用到。

示例如下:

import React, { Component } from 'react'export default class App extends Component {clickHandle = () => {console.log(this);console.log(this.refs.inputRef);this.refs.inputRef.focus();}render() {return (<div><input type="text" ref="inputRef"/><button onClick={this.clickHandle}>聚焦</button></div>)}
}

在上面的代码中,我们在 input 上面挂了一个 ref 属性,对应的值为 inputRef,之后查看组件实例,可以看到该组件实例中的 refs 里面就保存了该 inputDOM 元素。

image-20221130135240603

然后我们就可以像之前一样进行 DOM 元素的操作了。例如在上面的示例中我们进行了聚焦的操作。

但是这里需要注意两点:

  • 避免使用 refs 来做任何可以通过声明式实现来完成的事情
  • API 已经过时,可能会在未来的版本被移除,官方建议我们使用回调函数或 createRef API 的方式来代替

参阅官网 https://zh-hans.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

至于为什么 String 类型的 Refs 会被废弃,主要是以下几个方面原因:

image-20221130135301934

参阅地址:https://github.com/facebook/react/pull/8333#issuecomment-271648615

createRef API

接下来我们来看一下官方推荐的 createRef API

import React, { Component } from 'react'export default class App extends Component {constructor(props) {super();this.inputRef = React.createRef();console.log(this.inputRef); // {current: null}}clickHandle = () => {console.log(this.inputRef); // {current: input}this.inputRef.current.focus();}render() {return (<div><input type="text" ref={this.inputRef}/><button onClick={this.clickHandle}>聚焦</button></div>)}
}

在上面的代码中,我们创建 Ref 不再是通过字符串的形式,而是采用的 createRef 这个静态方法创建了一个 Ref 对象,并在组件实例上面新增了一个 inputRef 属性来保存这个 Ref 对象。

image-20221130135404602

createRef 这个方法本质也很简单,就是返回了一个 {current: null} 的对象,下面是 createRef 的源码:

image-20221130135424421

最后我们把这个对象和 input 进行关联。

如果要获取 DOM 元素,可以通过 this.inputRef.current 来获取。

除了在 JSX 中关联 Ref,我们还可以直接关联一个类组件,这样就可以直接调用该组件内部的方法。例如:

// 子组件
import React, { Component } from 'react'export default class ChildCom1 extends Component {test = () => {console.log("这是子组件的 test 方法");}render() {return (<div>ChildCom1</div>)}
}
// 父组件
import React, { Component } from 'react';
import ChildCom1 from "./components/ChildCom1"export default class App extends Component {constructor(props) {super();this.comRef = React.createRef();}clickHandle = () => {console.log(this);console.log(this.comRef); // {current: ChildCom1}this.comRef.current.test();}render() {return (<div>{/* ref 关联子组件 */}<ChildCom1 ref={this.comRef}/><button onClick={this.clickHandle}>触发子组件方法</button></div>)}
}

虽然提供这种方式,但这是一种反模式,相当于回到了 jQuery 时代,因此尽量避免这么做。

React.createRef API 是在 React 16.3 版本引入的,如果是稍早一点的版本,官方推荐使用回调 Refs,也就是函数的形式。例如:

import React, { Component } from 'react';
import ChildCom1 from "./components/ChildCom1"export default class App extends Component {constructor() {super();this.inputRef = element => {this.inputDOM = element;};this.comRef = element => {this.comInstance = element;};}clickHandle = () => {this.inputDOM.focus();this.comInstance.test();}render() {return (<div>{/* ref 关联子组件 */}<input type="text" ref={this.inputRef} /><ChildCom1 ref={this.comRef} /><div><button onClick={this.clickHandle}>聚焦并且触发子组件方法</button></div></div>)}
}

注意

函数组件不能使用 ref 属性。因为函数组件没有实例。可以通过 useRef 使用 ref。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/831334.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker consul 的容器服务更新与发现

目录 一. consul 的相关知识 1 什么是注册与发现 2. 什么是 consul 3. zookeeper 和 consul 的区别 二. consul 部署 1. consul 服务器 2. registrator 服务器 三. consul-template 1. consul-template 的作用 2. consul-template 的具体部署运用 2.1 准备 templa…

Deep Learning Part Five RNNLM的学习和评价-24.4.30

准备好RNNLM所需要的层&#xff0c;我们现在来实现RNNLM&#xff0c;并对其进行训练&#xff0c;然后再评价一下它的结果的。 5.5.1 RNNLM的实现 这里我们将RNNLM使用的网络实现为SimpleRnnlm类&#xff0c;其层结构如下&#xff1a; 如图 5-30 所示&#xff0c;SimpleRnnlm …

设计模式: 工厂模式

工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一&#xff0c;这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 工厂模式提供了一种创建对象的方式&#xff0c;而无需指定要创建的具体类。 工厂模式属于创建型…

我的毕业实习经历

我的毕业实习经历 前言求职之路成为社畜重获自由结语 前言 这篇博客原本我想以实习生找工作踩坑指南&#xff1a;我的毕业实习经历为文章标题的&#xff0c;原因是跟我前面发布的一篇博客《实习生找工作踩坑指南&#xff1a;租房篇》做一个呼应收尾&#xff0c;奈何标题略显臃肿…

【Oracle】常用命令汇总

本文基于黑马程序员文档做的二次总结&#xff0c;如有侵权&#xff0c;请联系本人删除。 文章目录 字段定义创建表空间创建用户用户赋权创建表表增加字段表更改字段类型表字段重命名表删除字段删除表 记录的增删改表插入记录表修改记录表删除记录 导入导出数据库导出数据库全部…

MongoDB聚合运算符:$sum

MongoDB聚合运算符&#xff1a;$sum 文章目录 MongoDB聚合运算符&#xff1a;$sum语法使用返回的数据类型非数值或缺失字段的处理数组操作数 举例应用于$group阶段应用于$project阶段应用于$setWindowFields阶段 $sum聚合运算符返回数值的合计值&#xff0c;计算式 $sum会忽略…

免费分享一套SpringBoot+Vue在线考试系统(优质版),帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue在线考试系统(优质版)&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue在线考试系统(优质版) Java毕业设计_哔哩哔哩_bilibili【免费】SpringBootVue在线考试系统(优质版) Java毕…

C++奇迹之旅:C++内存管理的机制(进阶篇)

文章目录 &#x1f4dd;new和delete操作自定义类型&#x1f320; operator new与operator delete函数&#x1f309;operator new与operator delete函数 &#x1f320;new和delete的实现原理&#x1f309;内置类型&#x1f309;自定义类型 &#x1f320;定位new表达式(placement…

KCF算法的优缺点是什么

KCF算法&#xff08;Kernelized Correlation Filters&#xff09;是一种用于目标跟踪的算法&#xff0c;它结合了核技巧和相关滤波器的思想&#xff0c;可以在视频中跟踪运动目标。以下是KCF算法的主要优缺点&#xff1a; 优点&#xff1a; 速度快&#xff1a;KCF算法使用离散…

Python 全栈体系【四阶】(三十八)

第五章 深度学习 八、目标检测 3. 目标检测模型 3.2 YOLO 系列 3.2.1 YOLOv1&#xff08;2016&#xff09; 3.2.1.1 基本思想 YOLO&#xff08;You Only Look Once &#xff09;是继 RCNN&#xff0c;fast-RCNN 和 faster-RCNN 之后&#xff0c;Ross Girshick 针对 DL 目…

【牛客网】值周

原题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 差分。 因为l<100000000,所以数组开1e8。 唯一需要注意的点就是前面给b[0]单独赋值为1&#xff08;因为如果在循环中给b[0]赋值&…

Json高效处理方法

一、参考我之前的博客,Delphi可以很方便的把类和结构体转换成JSON数据,但是数据量大了,就会非常之慢,1万条数据需要20秒左右。如果引用Serializers单元,那么100万数据只需要4秒左右,每秒处理20万+,速度还是很快的。 二、写一个简单的类  TPeople = class private …

Docker Compose如何安装

Docker Compose的安装通常依赖于你的操作系统。以下是在不同操作系统中安装Docker Compose的方法&#xff1a; Linux 系统 //下载最新版本的Docker Compose sudo curl -L "https://github.com/docker/compose/releases/download/v2.5.1/docker-compose-$(uname -s)-$(un…

算法训练营第十天 | LeetCode 232 用栈实现队列、LeetCode 225 用队列实现栈

栈的实现有顺序表和链式表两种&#xff0c;也就是数组和链表实现。 其中抽象栈类的私有成员函数有operator的重载函数和stack的构造函数&#xff0c;为了保护栈的构造和拷贝被保护。公有成员函数有Stack()&#xff0c;~Stack()&#xff0c;clear()&#xff0c;push()&#xff…

C++成员函数内联(inline)

内联函数是C为提高程序运行速度所做的一项改进。常规函数和内联函数之间的主要区别不在于编写方式,而在于C编译器如何将它们组合到程序中。 当程序执行函数调用时,系统要为即将调用的函数创建栈空间(栈帧),保存现在正在执行的函数数据(保护现场),传递参数以及控制程序执…

Python的主要应用领域

Python是一种广泛应用的高级编程语言&#xff0c;以其强大的功能和简洁的语法受到开发者的青睐。自1991年首次发布以来&#xff0c;Python的应用范围已经从简单的脚本语言发展到支持多种编程范式&#xff08;包括面向对象、命令式、函数式编程和过程式&#xff09;的全功能语言…

spring bean的生命周期你了解么

Spring Bean的生命周期是指在Spring容器中创建、初始化、使用和销毁Bean实例的整个过程。理解Spring Bean的生命周期对于开发者来说非常重要&#xff0c;因为它涉及到在不同的生命周期阶段执行自定义逻辑的机会。下面是关于Spring Bean生命周期的详细解释&#xff0c;包括各个阶…

修复提高PDF清晰度软件

修复提高PDF清晰度软件 使用python脚本对pdf进行优化&#xff0c;提高pdf清晰度&#xff0c;使文字更加清晰&#xff0c;观感更佳。仅适用黑白扫描版pdf&#xff0c;且文字较为清晰&#xff0c;若字形笔画较模糊会更加模糊。 注意事项 cpu满核极速运行&#xff0c;软件可能卡…

【实时数仓架构】方法论

笔者不是专业的实时数仓架构&#xff0c;这是笔者从其他人经验和网上资料整理而来&#xff0c;仅供参考。写此文章意义&#xff0c;加深对实时数仓理解。 一、实时数仓架构技术演进 1.1 四种架构演进 1&#xff09;离线大数据架构 一种批处理离线数据分析架构&#xff0c;…

【Java从入门到精通】Java 正则表达式

目录 正则表达式实例 &#x1f349;java.util.regex 包 &#x1f349;实例 &#x1f349;捕获组 &#x1f349;实例 &#x1f349;RegexMatches.java 文件代码&#xff1a; &#x1f349;正则表达式语法 &#x1f349;Matcher 类的方法 &#x1f349;索引方法 &#…