自定义hooks实现一个简单的倒计时

自定义倒计时Hook

原创已于 2022-03-27 11:51:31 修改 · 3.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react #hooks

于 2022-03-27 11:50:44 首次发布

react 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用React Hooks实现的自定义倒计时Hook，该Hook能够通过递减的方式实时更新并显示剩余时间，直至计时结束。文章提供了一个完整的实现示例，并将其封装成组件供实际应用。

常见面试题目，实现自定义hooks


import { useEffect, useState } from 'react';
import styles from './index.module.css';

// 自定义hook
function useCountDown(initN: number) {
  // 定义状态
  const [n, setN] = useState(initN)  
  const changeCount = (n: number) => {
    const timer = setTimeout(() => {
      const current = --n; // n-- 值还是10未变 --n值为9改变
      console.log('current', current)
      setN(current)
    }, 1000);
    return timer;
  }

  // 监听状态变化
  useEffect(() => {
    const timer = changeCount(n);
    console.log('timer :>> ', timer);
    if (n === 0) {
      setN(0);
      clearTimeout(timer);
    }

    return () => {
      clearTimeout(timer);
    }
  }, [n])

  // 返回状态
  return {n};
}
// 封装成组件
function Timer({ n }: { n: number }) {
  const {n: time } = useCountDown(n)

  return <span>{time === 0 ? '开始' : `剩余${time}秒`}</span>
}



export default function Count() {
  return (
    <div className={styles.container}>
      <h2>倒计时</h2>
      <Timer n={10} />
    </div>
  );
}