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 分钟前
在 React Three Fiber 中实现 3D 模型点击扩散波效果
前端·react.js·前端框架
爱敲代码的小冰8 分钟前
npm 切换 node 版本 和npm的源
前端·npm·node.js
DoraBigHead13 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
future141225 分钟前
项目开发日记
前端·学习·c#·游戏开发
汪子熙34 分钟前
CSS 中 td:last-child a 选择器详解
前端·javascript
q5673152341 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple1 小时前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua1 小时前
Vue3常用指令
前端·javascript·vue.js
欧阳天风1 小时前
录音实时上传
前端·javascript
江号软件分享1 小时前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端