在react中点击按钮倒计时页面展示不要使用useEffect

在React中实现点击按钮倒计时页面展示，可以使用以下方法：

创建一个计时器的状态变量和一个按钮点击状态变量：

import React, { useState } from 'react';

function CountdownPage() {
  const [count, setCount] = useState(0);
  const [isCounting, setCounting] = useState(false);

  const handleClick = () => {
    setCounting(true);
    setCount(10); // 设置初始倒计时时间为10秒

    const timer = setInterval(() => {
      setCount((prevCount) => prevCount - 1); // 每秒减少1秒
    }, 1000);

    setTimeout(() => {
      clearInterval(timer);
      setCounting(false);
    }, 10000); // 倒计时10秒后停止计时
  };

  return (
    <div>
      <h1>倒计时页面</h1>
      <button onClick={handleClick} disabled={isCounting}>
        {isCounting ? '倒计时中...' : '开始倒计时'}
      </button>
      <p>倒计时时间：{count}</p>
    </div>
  );
}

export default CountdownPage;

在上述代码中，我们使用了两个状态变量count和isCounting来分别记录倒计时的时间和按钮的点击状态。当点击按钮时，我们设置isCounting为true，并开始一个计时器来每秒减少倒计时时间count的值。当倒计时结束后，清除计时器并将isCounting设置为false。

注意，在上述代码中没有使用useEffect钩子函数，因为在这种简单的情况下，不需要使用useEffect来监听状态的变化