React 中定时器的用法

在 react 中,要使用定时器,需要先了解它 hooks 的属性

对于 React 的函数组件来说,只要修改状态,组件就会更新。同时,函数中的代码都会从头到尾重新执行一遍。 每一次的组件更新,都是一次全新的函数调用,在这一次的调用中都会创建新的:

  1. 变量,比如:存储状态的变量 count
  2. 函数,比如:事件处理程序 handleClick

此处,我们重点来关注下状态变量的值,因为我们需要在接下来的操作中拿到状态的值。

需要特殊说明的是:当一个函数内部访问了外部的状态变量时 (比如,handleClick 访问了外部变量 count),由于 JS 函数闭包机制 的存在,这个函数内部只能访问到本次组件更新时创建的变量值。比如:

组件第一次执行(第一次创建的闭包):

变量 count 的值为:0

函数 handleClick 访问到的外部变量 count 的值就是:0

点击 +1 按钮,组件重新渲染,组件第二次执行(第二次创建的闭包):

变量 count 的值为:1

函数 handleClick 访问到的外部变量 count 的值就是:1

怎么理解这个过程呢? 可以把组件的每次更新想象成给组件拍照,组件每次更新都会对应到一张照片,而每一张特定的照片都记录了那一刻组件特定的状态。

比如:

  1. 第一张照片(组件第一次执行)中 count 的值为:0
  2. 第二张照片(组件更新会后,第二次执行)中 count 的值为:1

setTimeout

从原理层面来看,每一张照片实际上就是每次调用组件函数时创建的闭包。

使用 React 的 useState 钩子来管理一个名为 count 的状态变量。这个组件展示了如何使用 setTimeout 与 React 状态一起工作:

js 复制代码
import { useState } from "react";

const SetTimeoutUse = () => {
  const [count, setCount] = useState<any>(null);

  console.log("控制台直接打印", count);

  const handlieClick = () => {
    setCount(count + 1);
  };

  const getCount = () => {
    setTimeout(() => {
      console.log("定时器 2s 后执行", count);
    }, 2000);
  };

  return (
    <>
      <h1>数值:{count}</h1>

      <button onClick={handlieClick}>点击按钮 +1</button>

      <button onClick={getCount}>点击延迟按钮 +1</button>
    </>
  );
};

export default SetTimeoutUse;

setInterval

使用React的useState钩子来管理一个名为timeLeft的状态变量,每秒钟减少这个状态变量的值。

js 复制代码
    /**定时器 */
    setTimgLeft(5);
    timerRef.current = window.setInterval(() => {
      setTimgLeft((timeLeft) => timeLeft - 1);
    }, 1000);

清除定时器

js 复制代码
  /**倒计时为 0 则清除定时器 */
  useEffect(() => {
    if (timeLeft === 0) {
      clearInterval(timerRef.current);
    }
  }, [timeLeft]);
  /**组件销毁时清除定时器 */
  useEffect(() => {
    return clearInterval(timerRef.current);
  }, []);

在页面中的显示

js 复制代码
 <span onClick={timeLeft === 0 ? verification : undefined}>
      {timeLeft === 0 ? "发送验证码" : `${timeLeft}s 后重新获取`}
 </span>
相关推荐
良艺呐^O^1 分钟前
uniapp实现app自动更新
开发语言·javascript·uni-app
IT瘾君1 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库2 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端2 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED2 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪3 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程3 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常3 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴3 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中3 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss