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);

相关推荐
仲夏幻境3 分钟前
js利用ajax同步调用如何
开发语言·javascript·ajax
java水泥工9 分钟前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示
鹿鹿鹿鹿isNotDefined15 分钟前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
运维行者16 分钟前
知乎崩了?立即把网站监控起来!
前端·javascript·后端
stayong34 分钟前
市面主流跨端开发框架对比
前端
一米八二的矮个子37 分钟前
JavaScript语法进阶(一)
javascript
庞囧1 小时前
大白话讲 React 原理:Scheduler 任务调度器
前端
liyi_hz20081 小时前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件
东华帝君1 小时前
react 虚拟滚动列表的实现 —— 动态高度
前端
CptW1 小时前
手撕 Promise 一文搞定
前端·面试