如何使反应倒数计时器

Question

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

我为我找到了理想的例子：https://codesandbox.io/s/0q453m77nw?from-embed 但这是一个类组件，我不想用功能组件和钩子来做，但我不能。

我试过了：

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钩子导致倒计时每秒运行不止一次。

这是一个简化的解决方案，我们检查useEffect钩子中的seconds，然后：

• 使用setTimeout在 1 秒后更新seconds，或者
• 做其他事情(你想在倒计时结束时调用的函数(

这种方法有一些缺点，见下文。

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检查当前时间以计算倒计时。

Answer 2

你关心精度吗？如果是这样，你不需要 setInterval。如果您不关心精度(您可能不关心(，那么您可以安排一个呼叫以间隔tick()，而不是相反。

const TimeoutComponent extends Component {
constructor(props) {
super(props);
this.state = { countdown: 10 };
this.timer = setInterval(() => this.tick(), props.timeout || 10000);
}
tick() {
const current = this.state.countdown;
if (current === 0) {
this.transition();
} else {
this.setState({ countdown: current - 1 }); 
} 
}
transition() {
clearInterval(this.timer);
// do something else here, presumably.
}
render() {
return <div className="timer">{this.state.countDown}</div>;
}
}

Answer 3

这有点取决于你的逻辑。在当前情况下，运行tick方法的useEffect在每个渲染上运行。你可以在下面找到一个幼稚的例子。

function App() {
const [seconds, setSeconds] = useState(10);
const [done, setDone] = useState(false);
const foo = useRef();
useEffect(() => {
function tick() {
setSeconds(prevSeconds => prevSeconds - 1)
}
foo.current = setInterval(() => tick(), 1000)
}, []);
useEffect(() => {
if (seconds  === 0) {
clearInterval(foo.current);
setDone(true);
}
}, [seconds])
return (
<div className="App">
{seconds}
{done && <p>Count down is done.</p>}
</div>
);
}

在第一个效果中，我们正在进行倒计时。使用回调 1 设置状态，因为间隔会创建闭包。在第二个效果中，我们正在检查我们的状况。

Answer 4

只需使用此代码段，因为它也有助于记住超时回调。

const [timer, setTimer] = useState(60);    
const timeOutCallback = useCallback(() => setTimer(currTimer => currTimer - 1), []);
useEffect(() => {
timer > 0 && setTimeout(timeOutCallback, 1000);
}, [timer, timeOutCallback]);
console.log(timer);

希望这对您或其他人有所帮助。

祝您编码愉快！