React中Hooks封装倒计时60S

在React中使用Hooks来封装一个倒计时60秒的功能可以通过以下步骤实现：

1. 使用useState钩子来保存倒计时的剩余秒数。
2. 使用useEffect钩子来处理倒计时逻辑，包括开始倒计时和清理计时器。
3. 使用setTimeout函数来每秒减少剩余秒数。
4. 提供一个函数来重置倒计时。

以下是一个简单的实现示例：

import React, { useState, useEffect } from 'react';
 
const useCountdown = (seconds, callback) => {
  const [count, setCount] => useState(seconds);
 
  useEffect(() => {
    let timerID = null;
    
    const countdown = () => {
      if (count > 0) {
        setCount(count - 1);
      } else {
        clearInterval(timerID);
        callback();
      }
    };
 
    timerID = setInterval(countdown, 1000);
 
    return () => clearInterval(timerID);
  }, [count, callback]);
 
  return [count];
};
 
const CountdownButton = ({ seconds, onCountdownEnd }) => {
  const [count, resetCountdown] = useCountdown(seconds, onCountdownEnd);
 
  return (
    <button
      disabled={count > 0}
      onClick={() => !(count > 0) && resetCountdown(seconds)}
    >
      {count > 0 ? `Wait ${count} seconds` : 'Click Me'}
    </button>
  );
};
 
export default CountdownButton;

在这个例子中，useCountdown是一个自定义的Hook，它接收剩余秒数和一个回调函数，当倒计时结束时会调用这个回调函数。CountdownButton组件使用了这个Hook，并展示了如何在按钮上实现倒计时功能。当按钮被点击时，如果倒计时未结束，按钮会显示剩余的秒数，如果倒计时结束，按钮会变为可点击状态。