useRef的用法总结

2022-12-24 21:21:32 浏览数 (1)

useRef是一个方法,且useRef返回一个可变的ref对象(对象!!!)initialValue被赋值给其返回值的.current对象可以保存任何类型的值:dom、对象等任何可变值ref对象与自建一个{current:‘’}对象的区别是:useRef会在每次渲染时返回同一个ref对象,即返回的ref对象在组件的整个生命周期内保持不变。自建对象每次渲染时都建立一个新的。ref对象的值发生改变之后,不会触发组件重新渲染。有一个窍门,把它的改变动作放到useState()之前。本质上,useRef就是一个其.current属性保存着一个可变值“盒子”。目前我用到的是pageRef和sortRef分别用来保存分页信息和排序信息。

useState和useRef在组件重新渲染时都不会重复执行,这里的区别是,useRef相当于在React的全局对象上挂载了一个变量,无论组件如何变化都不会影响这个变量,而这个变量的值发生变化也不会使组件渲染。

useState,组件重新渲染,useState不会重复执行,useState的效果相当于在React的全局对象上挂载了一个变量,组件重新渲染,并不会造成变量的更新,而变量的值更新的话,一般通过setXXX来更新,组件就会重新渲染,这点和UseRef创造的变量不同。

UseRef创造的变量发生变化不会导致组件重新渲染。

UseRef一般用在哪些地方呢?

  • 管理焦点,文本选择或媒体播放。
  • 触发强制动画。
  • 集成第三方 DOM 库。

以上便是useRef的用法总结希望对你有所帮助。

0 人点赞