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

相关内容

热门资讯

复刻贵州馆子味!家常泡椒炒牛肉... 贵州泡椒炒牛肉是一道充满地方特色的家常菜,它以鲜嫩的牛肉和酸辣开胃的泡椒为主要食材,成菜香气扑鼻,口...
黔寨风味“黄金派”:外酥内糯,... 在贵州连绵的群山与缭绕的云雾间,散落着许多古老村寨。这里不仅保留着深厚的民族传统,更隐藏着无数令人惊...
大妈教你东北芥菜疙瘩的腌制方法... 眼下正是腌菜的好时节,每年这个时候,我总会想起东北大娘腌的芥菜疙瘩,那味道堪称一绝。她的做法特别简单...
原创 一... 家人们谁懂啊!黑椒牛肉配杏鲍菇真的是神仙组合!软嫩多汁的牛肉裹着浓郁的黑椒酱汁,杏鲍菇吸饱了肉香变得...