useRef 与 createRef 区别
admin
2024-02-28 11:24:15

const ref = useRef(initialValue);

useRef

  • useRef返回一个可变的 ref 对象,该对象只有个 current 属性,初始值为传入的参数( initialValue );
  • 返回的 ref 对象在组件的整个生命周期内保持不变,除非手动修改;
  • 当更新 current 值时并不会 re-render ,这是与 useState 不同的地方;
  • useRef也可以用来区分初始渲染还是更新(通过current有没值);

useRef 与 createRef 区别

  1. useRef是use hooks的一种,一般用于function组件,而createRef一般用于class组件;
  2. 由useRef创建的ref对象在组件的整个生命周期内都不会改变,但是由createRef创建的ref对象,组件每更新一次,ref对象就会被重新创建。

import React, {useRef,useState} from 'react'

export default function Fcom() {

const [, setChange] = useState();

const valRef = useRef(80);

return (

//不管你怎么点击按钮,value的值都会是80,并不会发生变化,这是因为ref对象的改变,并不会触发页面的更新setChange({})更新页面

{valRef.current} 

)

}

2:ref对象可以用于保存数据

3 获取子组件的属性或方法

相关内容

热门资讯

山水皆有情!丽江两山一江的千年... 去过丽江、走过虎跳峡的人,大概率都听过哈巴雪山和金沙江的传说。很多人站在峡谷之下,望着奔腾不息的金沙...
活力中国调研行丨“殷”你而来 ... 9月12日,游客在殷墟博物馆“甲骨文展厅”内参观。位于河南省安阳市的殷墟博物馆新馆是首个全景式展现商...
浦江之夜赴美好相逢,第37届上... 9月12日晚,黄浦江畔灯火璀璨,第37届上海旅游节大巡游在外滩中山东一路上演。不少观众早早便来到外滩...
美丽中国丨秋韵紫鹊界 梯田入画... 这是9月11日拍摄的紫鹊界梯田(无人机照片)。 金秋九月,湖南省娄底市新化县紫鹊界梯田稻谷渐次成熟。...
中国之巅奏响《共同的节日》,千... 千吨阻尼器,“迎世赛、游上海旅游节”。9月13日,由上海市文化和旅游局指导推出上海旅游·会客│巅峰之...