useRef
是一个 React Hook,它能让你引用一个不需要渲染的值。
点击计时器
点击按钮后在控制台可以打印但是页面不生效。
useRef
返回的值在函数组件中不会自动触发重新渲染,所以控制台可以显示变化而按钮上无法显示 ref.current
的变化。
import { useRef } from "react";
const ClinkNumber = () => {
let ref = useRef(0);
function handleClick() {
ref.current = ref.current + 1;
// 每次触发函数会跟随变动 +1
console.log(ref.current);
}
return (
<div>
// ref.current 不会跟随变动
<button onClick={handleClick}>点击计时器 {ref.current}</button>
</div>
);
};
export default ClinkNumber;
解决这个问题的方法是使用 React 的状态管理来保存并更新计数器的值。文章来源:https://www.toymoban.com/news/detail-693865.html
const [counter, setCounter] = useState(0);文章来源地址https://www.toymoban.com/news/detail-693865.html
到了这里,关于useRef 定义的 ref 在控制台可以打印但是页面不生效?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!