做公众号策划的网站,烟台住房和规划建设局网站,学校网站的作用,制作营销网站公司看一下官网定义 useRef是一个React Hook#xff0c;它能帮助引用一个不需要渲染的值 这句话透露出一个信息#xff0c;不需要渲染的值可以用useRef引用#xff0c;那需要渲染的值用什么引用呢#xff1f;当然是useState了#xff0c;需要渲染的值指的就是状态嘛#xff0…看一下官网定义 useRef是一个React Hook它能帮助引用一个不需要渲染的值 这句话透露出一个信息不需要渲染的值可以用useRef引用那需要渲染的值用什么引用呢当然是useState了需要渲染的值指的就是状态嘛 看下官网的例子可以方便你理解
import React,{useState, useEffect, useRef} from react;const DemoRef () {const [count, setCount] useState(0)let timer null;useEffect(() {timer setInterval((){//这里注意一下不要直接传递下一个状态setCount(count1),这样做的话你会发现一直是0--1来回闪烁//这是因为set函数不会更新已经运行在代码中的count状态变量而传递一个更新函数setCount(countcount1)//则会获取待定状态并从中计算下一个状态setCount(countcount1)},1000)}, [])const onClick () {console.log(timer,timer)clearInterval(timer)}return (divpcount:{count}/pbutton onClick{onClick}点击清除/button/div)
}
export default DemoRef;结果如图会发现timer一直是null这是因为每次setState之后组件都会重新运行一遍然后let timer null每次都每次都会重新赋值为null。这样很明显内存泄漏。 这时就可以使用useRef来处理这个了
import React,{useState, useEffect, useRef} from react;const DemoRef () {const [count, setCount] useState(0)let timer useRef();useEffect(() {timer.current setInterval((){//这里注意一下不要直接传递下一个状态setCount(count1),这样做的话你会发现一直是0--1来回闪烁//这是因为set函数不会更新已经运行在代码中的count状态变量而传递一个更新函数setCount(countcount1)//则会获取待定状态并从中计算下一个状态setCount(countcount1)},1000)}, [])const onClick () {console.log(timer,timer)clearInterval(timer.current)}return (divpcount:{count}/pbutton onClick{onClick}点击清除/button/div)
}
export default DemoRef;通过这个例子就能看出useRef的一个功能那就是引用一个值使其跳过组件的重新渲染过程。 useRef还有一个功能那就是操作Dom。看下面这个例子
import React,{useRef} from react;const RefDom () {const inputRef useRef();const onClick () {console.log(inputRef.current)inputRef.current.value lili}return (divinput typetext ref{inputRef}/button onClick{onClick}点击自动填充/button/div)
}
export default RefDom;可以看到点击按钮之后会给input填充lili 使用 ref 可以确保 可以在重新渲染之间 存储信息普通对象存储的值每次渲染都会重置。改变它 不会触发重新渲染状态变量会触发重新渲染。对于组件的每个副本而言这些信息都是本地的外部变量则是共享的。
改变 ref 不会触发重新渲染所以 ref 不适合用于存储期望显示在屏幕上的信息。如有需要使用 state 代替。
