useRef 与 createRef 区别
admin
2024-02-28 11:24:15
0次
const ref = useRef(initialValue);
useRef
- useRef返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )；
- 返回的 ref 对象在组件的整个生命周期内保持不变，除非手动修改；
- 当更新 current 值时并不会 re-render ，这是与 useState 不同的地方；
- useRef也可以用来区分初始渲染还是更新(通过current有没值)；
useRef 与 createRef 区别
- useRef是use hooks的一种，一般用于function组件，而createRef一般用于class组件；
- 由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 获取子组件的属性或方法
相关内容
热门资讯
文旅IP如何避免“高开低走”？...
日前，由国家艺术基金资助、中国文化传媒集团主办、中传环球（北京）新媒体科技有限公司承办的国家艺术基金...
步履遍华夏，匠心铸芳华：茅台1...
当武汉主会场与济南、郑州、广州分会场的专家们同时举起品鉴杯，26位行业权威共同写下“微黄晶莹透明，酱...
原创 美...
美国的一项重磅研究最近引起了广泛关注，研究显示，若人们调整主食的选择，每年因癌症而失去的生命将减少一...
驻美大使谢锋参与录制美食节目，...
在全英文的访谈中，谢锋回答了许多提问。包括向观众介绍自己最喜欢的家乡菜。而他在节目的尾声还介绍了中国...
焦糖苹果，一口咬下，香甜满溢！
焦糖苹果是一道香甜可口的家常小食，既能作为休闲零食，也能成为餐桌上的甜蜜点缀。它的做法简单，食材易得...
十五运倒计时100天 | 爱吃...
全运年，看广州！ 广州好运大餐来啦！ “游龙舞凤炒河粉”“蒸蒸日上大虾饺”“刚柔并济姜撞奶”“同舟共...
恩施五天四晚怎么玩？暑假旅行攻...
第一天：初遇恩施，漫步女儿城 当飞机降落在恩施许家坪机场，扑面而来的是湿润清新的空气和满眼的绿意。这...
一家3口去北京4天游跟团花多少...
嘿，各位旅游爱好者们！北京，这座承载着千年历史与现代繁华的城市，宛如一颗璀璨的明珠，散发着独特的魅力...
深圳宝安国际机场至香港交通方案
深圳宝安国际机场至香港的交通方案一直是许多旅客关注的话题。随着两地经济的不断融合与人员交流的频繁，选...
景区门禁道闸系统助力智慧景区建...
近年来，智慧旅游不断从概念走向落地，成为众多景区提质增效的关键路径。尤其在数字化基础设施建设方面，景...
报团去贵州贵阳旅行五天大概要花...
报团去贵州贵阳旅行五天大概要花多少钱？看完全了解！ 贵州，这片位于中国西南部的瑰丽之地，以其独特的喀...
张家界五天四晚精品跟团游怎么玩...
张家界，是夏日里被时光遗忘的清凉角落。当城市的空气像一团闷热的棉花，让人喘不过气时，这里的峰林却始终...
五台山最新通告！明起执行
注意！注意！ 五台山景区发布车辆预约最新通告 具体事宜一起来看下文 关于五台山景区车辆预约系统身份认...
西安旅游六天五晚费用及攻略，报...
西安，这座古老而又充满活力的城市，承载着千年的文化底蕴与历史记忆。这里不仅有巍峨壮观的兵马俑、古朴典...