用react hook组件实现一个倒计时。

import { useEffect, useState } from 'react';

let count = 60;

function App() {
  const [countDown, setCountDown] = useState(count);

  useEffect(() => {
    const start = Date.now();
    const timer = setInterval(() => {
      const t = Math.round((Date.now() - start)/1000);

      const c = count - t;

      c <=0 && clearInterval(timer);
      setCountDown(c > 0 ? c : 0);
    }, 1000);
    return () => {
      clearInterval(timer);
    }
  }, []);

  return (
    <div className="App">
      {countDown}
    </div>
  );
}

export default App;

注意清理定时器。
注意useEffect第二个参数的传值。
注意时间循环定时器不准问题。

Vitaminaq / interview-collection

用react hook组件实现一个倒计时。 #19