react中hook怎么使用倒计时

最新推荐文章于 2024-05-06 10:13:06 发布

morenhaodan

最新推荐文章于 2024-05-06 10:13:06 发布

阅读量136

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/haodanzj/article/details/125299034

版权

该博客介绍了在React中如何创建一个404页面，当计时器倒计时结束后自动跳转回首页。通过`useEffect`钩子设置定时器，并在组件卸载时清理，确保资源有效管理。同时，提供了手动通过链接返回首页的选项。

摘要由CSDN通过智能技术生成

import { useEffect, useState, useRef } from 'react'
import { Link, useHistory } from 'react-router-dom'
import styles from './index.module.scss'
const NotFound = () => {
  const [count, setCount] = useState(5)
  const timeRef = useRef(null)
  const history = useHistory()

  useEffect(() => {
    timeRef.current = setInterval(() => {
      setCount(preCount => preCount - 1)
    }, 1000);
    //因为依赖项为空数组,所以,该返回的清理函数只会在组件卸载时执行
    return () => {
    //退出组件时卸载定时器
      clearInterval(timeRef.current)
    }
  }, [])
//count 必须写在另一个useEffect中,不然定时器会越开越多,出现不可控的后果
  useEffect(() => {
    if (count === 0) {
      history.replace('/home')
    }
  }, [count, history])



  return <div className={styles.root}>
    <h1>您访问的页面不存在哟~</h1>
    <p>将在{count}秒后返回首页(或者<Link to="/home">点击立即返回首页</Link> )</p>
  </div>
}
export default NotFound