javascript - 如何使 react 倒数计时器

Question

我正在尝试用 React 做倒数计时器。它基本上是从 10 到 0 的倒计时，当 0 时我将调用一些函数。

我找到了一些对我来说很理想的例子:https://codesandbox.io/s/0q453m77nw?from-embed但它是一个类组件，我不想用功能组件和 Hook 来做，但我不能。

我试过:

function App() {
  const [seconds, setSeconds] = useState(10);
  useEffect(() => {
    setSeconds(setInterval(seconds, 1000));
  }, []);

  useEffect(() => {
    tick();
  });

  function tick() {
    if (seconds > 0) {
      setSeconds(seconds - 1)
    } else {
      clearInterval(seconds);
    }
  }

  return (

    <div className="App">
      <div
        {seconds}
      </div>
    </div>
  );
}

export default App;

它从 10 倒数到 0 的速度非常快，而不是 10 秒。我错在哪里？

Answer 1

出现了多个useEffect Hook 导致倒计时每秒运行多次。

这是一个简化的解决方案，我们在其中检查 seconds在useEffect钩子(Hook)和:

• 使用setTimeout更新seconds 1 秒后，或
• 做点别的(倒计时结束时要调用的函数)

此方法有一些缺点，请参见下文。

function App() {
  const [seconds, setSeconds] = React.useState(10);

  React.useEffect(() => {
    if (seconds > 0) {
      setTimeout(() => setSeconds(seconds - 1), 1000);
    } else {
      setSeconds('BOOOOM!');
    }
  });

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

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

缺点

使用 setInterval缺点是它可能会被停止——例如，组件被卸载，您导航到另一个选项卡，或者关闭您的计算机。如果定时器需要更强的鲁棒性，更好的选择是存储一个 endTime。在状态中(如全局存储或上下文)并让您的组件根据 endTime 检查当前时间计算倒计时。