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 获取子组件的属性或方法

相关内容

热门资讯

上海旅游节大巡游花车阵容抢先看... 2026上海旅游节大巡游9月12日外滩启幕,21辆全新主题花车携手21支境内外表演方队联袂登场,邀你...
原创 8... 上周门诊来了位 62 岁的张阿姨,得糖尿病快五年了,平时管嘴特别严,糖果、点心、甜饮料一概不碰,连水...
原创 餐... 2026年9月8日晚,南京浦口区泰冯路29号,墨语江南·阿婆菜餐厅户外帐篷里,灯火温润,其间还天降喜...
原创 它... 人到中年肝肾精血慢慢耗损,容易腰膝酸软、头晕眼花、精神疲惫。黄精性平,擅长补肝肾、益精血,搭配不同食...
同样卖奶茶,为何古茗赚了15亿... 出品/联商专栏 撰文/老刀 编辑/蔡建桢 今年上半年,蜜雪、古茗、霸王茶姬、茶百道、沪上阿姨全部盈利...