react中使用定时器

该博客展示了如何在React应用中实现一个倒计时功能,包括设置初始秒数、清除定时器以及在倒计时结束后重置按钮状态。通过`useState`和`useEffect`钩子函数来管理组件状态,并在倒计时结束时触发验证码重新发送。用户可以通过点击按钮发送验证码并启动倒计时。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//let 一个倒计时变量
   let timer
const [second, setSecond] = useState(59) //倒计时秒数
  const [second, setSecond] = useState(59); // 倒计时秒数
 const [timer, setTimer] = useState(''); // d定时器Key
  useEffect(() => {
   setTimer('');
    clearInterval(timer)
    return () =>  clearInterval(timer)
  }, [])
  useEffect((() => {
    if (second > 0 && second < 60) {
    } else {
    setTimer('');
      clearInterval(timer)
      setBtnDisabled(false);
      setSecond(60);
    }
  }), [second])


  
    // 发送验证码,开启倒计时
    const sendCode = () => {
     setTimer(setInterval(() => setSecond((pre) => pre - 1), 1000));
      setBtnDisabled(true)
    }
//使用
 <Form.Item
            name="code"
            label="验证码"
            rules={[
              {
                required: true,
                message: '请输入邮箱中的验证码',
              },
                <Input
              style={{ width: '90%', marginRight: '35px' }}
              placeholder="请输入邮箱中的验证码" />
          </Form.Item>
             <Form.Item>
            <Button style={{fontSize: '12px'}}
             disabled= {btnDisabled} type="primary" onClick={() => {
              getKaptchacode()
              sendCode()
                }}>
                验证码 {second<59?second:''}
                </Button>
          </Form.Item>
        
       
### 如何在 React 中正确使用 `setInterval` 定时器 #### 类组件中的定时器实现 为了确保定时器能够正常工作并及时清理,在类组件中应当利用生命周期方法来管理定时器。具体来说,`componentDidMount` 方法用于初始化定时器,而 `componentWillUnmount` 则负责清除定时器以防止内存泄漏。 ```javascript class Timer extends React.Component { constructor(props) { super(props); this.state = { seconds: 0 }; } componentDidMount() { this.interval = setInterval(() => { this.setState((prevState) => ({ seconds: prevState.seconds + 1 })); }, 1000); } componentWillUnmount() { clearInterval(this.interval); } render() { return ( <div> Seconds: {this.state.seconds} </div> ); } } ``` 上述代码展示了如何创建一个每秒增加计数的简单计时器[^2]。 #### 函数组件与 Hooks 的组合使用 对于现代 React 开发而言,更推荐采用基于 Hook 的方式处理逻辑复杂的场景。这里介绍一种常见的做法—通过 `useEffect` 和 `useState` 来替代传统的生命周期钩子: ```jsx import React, { useState, useEffect } from 'react'; function TimerHook() { const [seconds, setSeconds] = useState(0); useEffect(() => { let intervalId; function tick() { setSeconds(prevSeconds => prevSeconds + 1); } intervalId = setInterval(tick, 1000); // 清理操作会在卸载组件或依赖项变化时触发 return () => clearInterval(intervalId); }, []); // 空数组表示仅当首次渲染时运行此副作用 return ( <div>Seconds (using hooks): {seconds}</div> ); } export default TimerHook; ``` 这段代码实现了相同的功能,但是采用了更加简洁的方式,并且更好地遵循了函数式的编程风格。 #### 防止重复挂载引起的错误 需要注意的是,如果不小心多次挂载同一个组件,则可能导致多个定时器实例同时存在,进而引发意想不到的行为。因此建议始终检查是否存在未被销毁的老化定时器实例,并采取适当措施加以防范[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值