[React] 核心属性refs—— 需要注意的问题

2023-05-16

官网链接:Refs and the DOM – React

1. 避免使用字符串的ref

什么是字符串的ref ?

<button ref="test"></button>

ref所赋予的值是一个字符串

官方不推荐使用,以下为官方原话

过时 API:String 类型的 Refs

如果你之前使用过 React,你可能了解过之前的 API 中的 string 类型的 ref 属性,例如 "textInput"。你可以通过 this.refs.textInput 来访问 DOM 节点。我们不建议使用它,因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。

其主要的原因在Update nuances of ref callback calling by unel · Pull Request #8333 · facebook/react · GitHub也大致说了以下

There are multiple problems with it:

  • It requires that React keeps track of currently rendering component (since it can't guess this). This makes React a bit slower.
  • It doesn't work as most people would expect with the "render callback" pattern (e.g. <DataGrid renderRow={this.renderRow} />) because the ref would get placed on DataGrid for the above reason.
  • It is not composable, i.e. if a library puts a ref on the passed child, the user can't put another ref on it (e.g. #8734). Callback refs are perfectly composable.

总体最主要的原因就是效率不高,同时当组件的层次复杂时,可能会存在其他问题

来至知乎评论区的回答:
1、当 ref 定义为string 时,需要 React 追踪当前正在渲染的组件,在 reconciliation 阶段, React Element 创建和更新的过程中, ref 会被包装为一个闭包函数, 等待 commit 阶段被执行,这会对React 的性能产生一些影响.
2、当使用 render callback 模式的时候,使用 string ref 会造成 ref 挂载位置产生歧义。

3、string ref 无法被组合,例如一个第三方库的父组件已经给子组件传递了 ref,那么我们就无法再在子组件上添加 ref 了,而 callback ref 可完美解决此问题。

2.回调中的refs

官方说明

关于回调 refs 的说明

如果 ref 回调函数是以内联函数的方式定义的,在更新过程中它会被执行两次,第一次传入参数 null,然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例,所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题,但是大多数情况下它是无关紧要的。

也就是说,我们的ref第一次其实就是初始化,第二次才会真正的传值,正常情况下其实并没有什么影响,因为最终都会得到值,但是在某些特殊情况这种会导致,比如foucus一个button,第一次很容易得到一个null,在console中是可以发现日志的。(这个案例正常不会发生,还是得基于业务的复杂程度)用mount写单元测试的时候更加明显,因为第一次渲染你的得不到ref的路径的。导致值无法获取判断。

同时官方推荐使用class进行操作。但是class是可以解决初始值为null的问题,但是他为一个实例,等于一个默认值。在有些需要灵活性大点的业务还是会存在问题的,这种业务大多数都是focus相关的问题。

3. refs的渲染问题

当之间使用以下这种格式的时候

<button ref = this.but></button>

正常的系统运行是没有问题的,但是这不能够进行单元测试的full render,当你去渲染的时候,会报出 ref需要是一个类或者是一个string的形式。具体还没有解决办法,只能使用shallow render进行操作,但是这个单元测试不能实现互动的效果,只能简单的得出该组件相关的属性值

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

[React] 核心属性refs—— 需要注意的问题 的相关文章

  • www服务

    www服务 1 概述 1 1 WWW服务简介 www服务全称为World Wide Web xff0c 常称为Web xff0c 中文译为 万维网 它是目前互联网上最受用户欢迎的信息服务形式 HTTP协议的WWW服务应用的默认端口为80 x

随机推荐

  • NUC11 PAHi5 拆机及清理灰尘

    这个NUC买了两年了 xff0c 现在正值春天 xff0c 温度还算适中 xff0c 20度左右 xff0c NUC就挂了两个下载任务 xff0c 开了网页 xff0c 风扇就狂转不停 xff0c 一查看cpu温度达到了70度 xff0c
  • 华为云服务器使用教程

    华为云服务器初始化 账户密码初始化远程登录的问题命令行界面登录文件传输图形界面win10的远程桌面登录centos6 账户 账户根据你选择的服务器的系统来定 xff0c 如果是Linux则是root xff0c 如果是windows则是ad
  • 一劳永逸解决Matplotlib中文和负号显示错误并给出RuntimeWarning的问题

    出错情况 xff1a 提示 xff1a RuntimeWarning Glyph XXXXX missing from current font font set text s 0 0 flags 61 flags 同时中文 负号以方框代替
  • 使用Python实现二分图的KM算法在出租车订单匹配上的应用

    1 需求 想要使用Python实现一个出租车仿真环境 xff0c 其中每个时间窗口内产生的request及其周围的taxi满足一个二分图的关系 原本计划request与taxi之间的匹配按照接客时间权值最小为目标进行匹配 xff0c 但是后
  • 人脸识别Haar算法总结

    参考https blog csdn net zhangbijun1230 article details 81676792
  • 【转帖】【详细】Notepad++使用心得和特色功能介绍 -> notepad/ultraedit的最好的替代品...

    notepad 43 43 简介 Notepad 43 43 是旨在替代Windows默认的notepad而生 xff0c 比notepad的功能强大很多很多 Notepad 43 43 有两个版本 xff0c 一个是ANSI版本 xff0
  • stm32--工程结构的简单理解

    作为一个新手入门stm32的同学 xff0c 我也就做了一个比较简单的工程 xff0c 但是感觉自己并没有对这个stme32有一个比较好的理解 xff0c 因此 xff0c 由于工作原因 xff0c 需要帮别人调试程序 xff0c 在移植工
  • FreeRTOS移植STM32

    第一步 xff1a FreeRTOS官网 https www freertos org https www freertos org 第二步 xff1a OS移植文件 复制 FreeRTOSv202104 00 FreeRTOS Sourc
  • freeOS-----primask faultmask basepri中断屏蔽寄存器

    primask暂时屏蔽中断寄存器 在许多应用中 需要暂时屏蔽所有的中断一执行一些对时序要求严格的任务 这个时候就 可以使用 PRIMASK 寄存器 PRIMASK 用于禁止除 复位 NMI 不可屏蔽中断 和 HardFalut 硬故障寄存器
  • freeOS快速笔记-----任务4种状态

    运行态 当一个任务正在运行时 那么就说这个任务处于运行态 处于运行态的任务就是当前正在 使用处理器的任务 如果使用的是单核处理器的话那么不管在任何时刻永远都只有一个任务处于运行态 就绪态 处于就绪态的任务是那些已经准备就绪 这些任务没有被阻
  • freeOS笔记-----列表与列表项

    xff08 2 xff09 uxNumberOfItems 用来记录列表中列表项的数量 xff08 3 xff09 pxIndex 用来记录当前列表项索引号 用于遍历列表 xff08 4 xff09 列表中最后一个列表项 用来表示列表结束
  • FreeRTOS快速笔记————队列

    队列 xff08 任务之间 全局变量 xff09 在实际的应用中 常常会遇到一个任务或者中断服务需要和另外一个任务进行 沟通交流 这个 沟通交流 的过程其实就是消息传递的过程 在没有操作系统的时候两个应用程序进行 消息传递一般使用全局变量的
  • FreeRTOS快速笔记——信号量

    信号量的阻塞时间 单位是系统的节拍周期configTICK RATE HZ 为100 xff0c 则系统节拍时钟周期为10ms xff0c 设置0就是不等待 xff0c 设置1 无限就是按时钟节拍算时间 xff0c 设置portMAX DE
  • Python获取Excel中超链接并下载至本地

    在这一任务的处理中 xff0c 我是用的是 xlrd模块 xff0c 它是用来读取Excel表格数据的模块 特别注意 xff1a 高版本的xlrd目前去除了对xlsx格式的支持 xff0c 仅支持 xls格式 xlrd biffh XLRD
  • MATLAB:梯度下降法求解一元和多元函数极小值和极大值

    梯度下降法 xff0c 顾名思义即通过梯度下降的方法 对于一个函数而言 xff0c 梯度是一个向量 xff0c 方向是表示函数值增长最快的方向 xff0c 而大小则表示该方向的导数 下面展示了用梯度下降法求解一元函数的MATLAB代码 xf
  • 根据Qfont中的family 得到字体文件的路径和文件名称

    转载 xff1a https www zhihu com question 25834024 根据Qfont中的family 得到字体文件的路径和文件名称 xff1b 源码 xff1a 头文件 include include include
  • 如何修改DirectUIHWND类里控件的数据

    有成功修改SysTlistView32 SysTreeVier32 ListVier32 Static类的方法 但对VISTA系统的DirectUIHWND类 没有好的办法 恳请高人指教
  • Jeston-TX2和小觅智能魔方安装tensorflow和keras

    1 下载TensorFlow离线文件 根据自己的JetPack版本在下面链接中选择对应的tensorflow 链接为tensorflow下载链接 如图所示 2 使用pip安装TensorFlow xff0c 如果是Python2用pip2
  • 2023python自动化抢单茅台

    2023python自动化下单抢茅台 xff08 小白篇 xff09 提前声明 本人实测一周 xff0c 均以失败告终 网络超时 当前人数过多等等原因 人格担保程序没有问题 xff0c 毕竟天底下那有这么好的事 最终结果不是重要的 xff0
  • [React] 核心属性refs—— 需要注意的问题

    官网链接 xff1a Refs and the DOM React 1 避免使用字符串的ref 什么是字符串的ref lt button ref 61 34 test 34 gt lt button gt ref所赋予的值是一个字符串 官方