当前位置：首页 > news >正文

响应式网站开发方案网页聊天工具

news 2025/9/16 4:27:46

响应式网站开发方案,网页聊天工具,前海网站建设,辽宁工程信息看一下官网定义 useRef是一个React Hook，它能帮助引用一个不需要渲染的值这句话透露出一个信息，不需要渲染的值可以用useRef引用，那需要渲染的值用什么引用呢？当然是useState了，需要渲染的值指的就是状态嘛&#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(count+1),这样做的话，你会发现一直是0-->1来回闪烁，//这是因为set函数不会更新已经运行在代码中的count状态变量，而传递一个更新函数setCount(count=>count+1)//则会获取待定状态，并从中计算下一个状态setCount(count=>count+1)},1000)}, [])const onClick = () => {console.log(timer,'timer')clearInterval(timer)}return (<div><p>count:{count}</p><button 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(count+1),这样做的话，你会发现一直是0-->1来回闪烁，//这是因为set函数不会更新已经运行在代码中的count状态变量，而传递一个更新函数setCount(count=>count+1)//则会获取待定状态，并从中计算下一个状态setCount(count=>count+1)},1000)}, [])const onClick = () => {console.log(timer,'timer')clearInterval(timer.current)}return (<div><p>count:{count}</p><button 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 (<div><input type="text" ref={inputRef}/><button onClick={onClick}>点击自动填充</button></div>)
}
export default RefDom;