首页 > 其他分享 >useRef 与 createRef 的区别

useRef 与 createRef 的区别

时间:2023-05-22 15:23:14浏览次数:25  
标签:useRef Render 区别 current 组件 createRef ref

两者区别: createRef 每次渲染都会返回一个新的引用,而useRef 每次都会返回相同的引用。

useRef
一般用于函数组件
useRef 不仅仅是用来管理 DOM ref 的,它还相当于 this , 可以存放任何变量.
当 useRef 的内容发生变化时,它不会通知您。
更改.current属性不会导致组件重新渲染。因为他一直是一个引用 。
createRef
一般用于类组件
	React.createRef 创建一个能够通过 ref 属性附加到 React 元素的 ref。
如果用于函数组件中
	当App这个函数组件被重新渲染时,App函数将会执行,并且重新创建、初始化所有的变量和表达式。
	因此,createRef每次都会被执行,所以对应的值总是为null。

实际应用的区别
useRef 仅能用在 FunctionComponent,createRef 仅能用在 ClassComponent。

Ref 不仅可以拿到组件引用、创建一个 Mutable 副作用对象,还可以配合 useEffect 存储一个较老的值,最常用来拿到 previousProps,React 官方利用 Ref 封装了一个简单的 Hooks 拿到上一次的值:

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

由于 useEffect 在 Render 完毕后才执行,因此 ref 的值在当前 Render 中永远是上一次 Render 时候的,我们可以利用它拿到上一次 Props:

function App(props) {
 const preProps = usePrevious(props);
}

标签:useRef,Render,区别,current,组件,createRef,ref
From: https://www.cnblogs.com/lyly96720/p/17420720.html

相关文章

  • 【iOS】MD5 与Base64 的区别
    MD5不可逆性(只能加密)。任意长度的明文字符串,加密后得到的密文字符串是长度固定的。Base64可逆性(能加密和解密)。可以将图片等二进制文件转换为文本文件。可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符。......
  • 【软考——系统架构师】架构、系分、软设的区别和联系
    ......
  • MSSQLServer和SQL Server Express、LocalDB的区别
    转载:https://www.cnblogs.com/lucky-donkey/p/13544916.html MSSQLServer:全称MicrosoftSQL Server,微软的数据库服务。SQLServerExpress:MicrosoftSQL Server的一个免费版,功能上有一些限制。                  1.数据库的大小限制:SQ......
  • java中JDK和JRE有什么区别?
    JavaDevelopmentKit(JDK)和JavaRuntimeEnvironment(JRE)是两个不同的Java发行版。JDK是Java开发者所必需的软件开发工具包,包含了Java编译器、Java虚拟机(JVM)、Java运行时环境(JRE)以及各种Java开发工具,它可以用来开发和编译Java应用程序。除了JRE所包含的内容外,JDK还包含开......
  • 置换贴图和一般贴图的区别
    置换贴图这种效果通常是让点的位置沿面法线移动一个贴图中定义的距离。它使得贴图具备了表现细节和深度的能力,且可以同时允许自我遮盖,自我投影和呈现边缘轮廓。>>高度图,视差贴图(Bump-maps),置换贴图(displacement),法线贴图的本质:https://zhuanlan.zhihu.com/p/266434175>>置换贴......
  • 函数传参类型为数组时,int*和char*的区别
    1.现象(1)假设有一个int型数组,我们先用int*给函数传参#define_CRT_SECURE_NO_WARNINGS1#include<stdio.h>voidtest(int*arr){ arr[1]=8;}intmain(){ intarr[]={7,3,4,6,8,9,1,5,2,10};test(arr); printf("%d\n",arr[0]); printf("%d",arr......
  • 动态ip与静态ip的区别是什么?
    动态ip和静态ip的区别在于:动态ip可以自动获取IP地址,静态ip需要手动设置IP地址。动态ip一般用于局域网内部或小型企业网中,静态ip一般用于大型企业网或骨干网等对安全性要求高的场合。在网速上,动态ip和静态ip没有区别。动态ip不是一个真实的IP地址,静态ip是可以直接上网的IP地址。IP地......
  • 【vue】div标签和template标签使用区别
       ......
  • GET和POST请求的区别
    GET和POST请求的区别:get把请求的数据放在url上,即HTTP协议头上,其格式为:以?分割URL和传输数据,参数之间以&相连。数据如果是英文字母/数字,原样发送,如果是空格,转换为+,如果是中文/其他字符,则直接把字符串用BASE64加密,及“%”加上“字符串的16进制ASCII码”。post把数据放在HTTP的包体内......
  • office与WPS的区别
    声明本篇主要是为了科普下WPSoffice与MSoffice。博主使用的WPS后续也将使用其讲解。如有不妥,欢迎评论。概要大众使用的办公软件目前大致是MSoffice和WPSoffice。学哪一个我感觉都差不多,毕竟它们两者基础功能都差不多(不考虑金钱的话嘿嘿)。MSoffice全称为MicrosoftOf......