useRef 定义的 ref 在控制台可以打印但是页面不生效?

useRef 是一个 React Hook,它能让你引用一个不需要渲染的值。

点击计时器

点击按钮后在控制台可以打印但是页面不生效。

useRef 返回的值在函数组件中不会自动触发重新渲染,所以控制台可以显示变化而按钮上无法显示 ref.current的变化。

js 复制代码
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 的状态管理来保存并更新计数器的值。

const [counter, setCounter] = useState(0);

相关推荐
阿喵派我来抓鱼8 分钟前
深入理解 AI 流式接口:从请求到响应的完整解析
react.js·ai·前端框架·vue
sdgsdgdsgc13 分钟前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生98414 分钟前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
心止水j15 分钟前
spark
javascript·数据库·spark
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务5 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端