网站建设竞价托管服务,dedecms 网站搬家,企业网络基础建设,佛山58同城网推广useRef
当你在React中需要处理DOM元素或需要在组件渲染之间保持持久性数据时#xff0c;便可以使用useRef。
import { useRef } from react;
const refValue useRef(initialValue)
refValue.current // 访问ref的值 类似于vue的ref,Vue的ref是.value#xff0c;其次就是vu…useRef
当你在React中需要处理DOM元素或需要在组件渲染之间保持持久性数据时便可以使用useRef。
import { useRef } from react;
const refValue useRef(initialValue)
refValue.current // 访问ref的值 类似于vue的ref,Vue的ref是.value其次就是vue的ref是响应式的而react的ref不是响应式的通过Ref操作DOM元素
参数
initialValueref 对象的 current 属性的初始值。可以是任意类型的值。这个参数在首次渲染后被忽略。
返回值
useRef返回一个对象对象的current属性指向传入的初始值。 {current:xxxx}
注意
改变 ref.current 属性时React 不会重新渲染组件。React 不知道它何时会发生改变因为 ref 是一个普通的 JavaScript 对象。除了 初始化 外不要在渲染期间写入或者读取 ref.current否则会使组件行为变得不可预测。
import { useRef } from react
function App() {//首先声明一个 初始值 为 null 的 ref 对象let div useRef(null)const heandleClick () {//当 React 创建 DOM 节点并将其渲染到屏幕时React 将会把 DOM 节点设置为 ref 对象的 current 属性console.log(div.current)}return ({/*然后将 ref 对象作为 ref 属性传递给想要操作的 DOM 节点的 JSX*/}div ref{div}dom元素/divbutton onClick{heandleClick}获取dom元素/button/)
}
export default App数据存储
我们实现一个保存count的新值和旧值的例子但是在过程中我们发现一个问题就是num的值一直为0这是为什么呢
因为等useState的 SetCount执行之后组件会重新rerender,num的值又被初始化为了0所以num的值一直为0。
import React, { useLayoutEffect, useRef, useState } from react;function App() {let num 0let [count, setCount] useState(0)const handleClick () {setCount(count 1)num count;};return (divbutton onClick{handleClick}增加/buttondiv{count}:{num}/div/div);
}export default App;如何修改
我们可以使用useRef来解决这个问题因为useRef只会在初始化的时候执行一次当组件reRender的时候useRef的值不会被重新初始化。
import React, { useLayoutEffect, useRef, useState } from react;function App() {let num useRef(0)let [count, setCount] useState(0)const handleClick () {setCount(count 1)num.current count;};return (divbutton onClick{handleClick}增加/buttondiv{count}:{num.current}/div/div);
}export default App;实际应用
我们实现一个计时器的例子在点击开始计数的时候计时器会每300ms执行一次在点击结束计数的时候计时器会被清除。
问题
我们发现点击end的时候计时器并没有被清除这是为什么呢
原因
这是因为组件一直在重新ReRender,所以timer的值一直在被重新赋值为null导致无法清除计时器。
import React, { useLayoutEffect, useRef, useState } from react;function App() {console.log(render)let timer: NodeJS.Timeout | null nulllet [count, setCount] useState(0)const handleClick () {timer setInterval(() {setCount(count count 1)}, 300)};const handleEnd () {console.log(timer);if (timer) {clearInterval(timer)timer null}};return (divbutton onClick{handleClick}开始计数/buttonbutton onClick{handleEnd}结束计数/buttondiv{count}/div/div);
}export default App;如何修改
我们可以使用useRef来解决这个问题因为useRef的值不会因为组件的重新渲染而改变。
import React, { useLayoutEffect, useRef, useState } from react;function App() {console.log(render)let timer useRefnull | NodeJS.Timeout(null)let [count, setCount] useState(0)const handleClick () {timer.current setInterval(() {setCount(count count 1)}, 300)};const handleEnd () {if (timer.current) {clearInterval(timer.current)timer.current null}};return (divbutton onClick{handleClick}开始计数/buttonbutton onClick{handleEnd}结束计数/buttondiv{count}/div/div);
}export default App;注意事项 组件在重新渲染的时候useRef的值不会被重新初始化。 改变 ref.current 属性时React 不会重新渲染组件。React 不知道它何时会发生改变因为 ref 是一个普通的 JavaScript 对象。 useRef的值不能作为useEffect等其他hooks的依赖项因为它并不是一个响应式状态。 useRef不能直接获取子组件的实例需要使用forwardRef。
