react 定时器

发布于 5 年前

更新于 5 年前

0 次阅读

AI Quick Summary · 核心脉络

TL;DR

本文介绍了三种实现倒计时功能的React方案。方案1使用`useEffect`和`setTimeout`实现倒计时，但存在潜在的性能问题；方案2未提供具体实现；方案3提到使用`useInterval`自定义Hook，但未展开说明。（预计阅读时间：1分钟）

方案1

import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(10);
  useEffect(() => {
    setTimeout(() => {
      setCount(count - 1);
    }, 1000);
  }, [count]);
  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={() => setCount((c) => c - 1)}>
        Edit to see some magic happen!
      </button>
    </div>
  );
}

方案2

方案3

useInterval

感谢阅读本文 · 欢迎在下方留言交流你的想法

探索更多文章 →

讨论与反馈

共 0 条

方案1

import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(10);
  useEffect(() => {
    setTimeout(() => {
      setCount(count - 1);
    }, 1000);
  }, [count]);
  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={() => setCount((c) => c - 1)}>
        Edit to see some magic happen!
      </button>
    </div>
  );
}

方案2

方案3

useInterval

讨论与反馈

评论