react 写一个10s倒计时

好的，以下是一个简单的 React 组件，实现了一个 10 秒的倒计时：

import React, { useState, useEffect } from "react";

function Countdown() {
  const [timeLeft, setTimeLeft] = useState(10);

  useEffect(() => {
    const timerId = setInterval(() => {
      setTimeLeft((prevTime) => prevTime - 1);
    }, 1000);

    return () => {
      clearInterval(timerId);
    };
  }, []);

  return <div>{timeLeft} seconds left</div>;
}

首先，我们使用 `useState` hook 来定义一个状态变量 `timeLeft`，初始值为 10，表示剩余时间。然后，我们使用 `useEffect` hook 来实现定时器的功能。在 `useEffect` 的回调函数中，我们使用 `setInterval` 创建一个定时器，每隔一秒钟减少 `timeLeft` 的值。同时，我们也在 `useEffect` 的返回函数中清除定时器，避免内存泄漏。

最后，我们在组件中返回一个简单的 UI，显示剩余时间。