如何hook实现一个定时器

2024-08-21 12:12

文章标签 实现定时器 hook

本文主要是介绍如何hook实现一个定时器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

useState

首先展示一个简单的例子，使用useEffect和useState来创建一个简单的计数器组件：

import React, { useState, useEffect } from 'react';function Timer() {const [count, setCount] = useState(0);useEffect(() => {const intervalId = setInterval(() => {setCount(count => count + 1);}, 1000);// 清理函数，在组件卸载或者定时器更新前被调用return () => clearInterval(intervalId);}, []); // 传入空数组作为依赖项确保只在组件挂载时运行一次return (<div><h1>Count: {count}</h1></div>);
}export default Timer;

这段代码使用了useState和useEffect两个react hook。useState用于定义一个状态变量count和一个更新函数setCount。
useEffect用于在组件挂载后执行一个副作用函数，该函数中创建了一个定时器，每隔一秒调用setCount函数，并传入一个函数作为参数。
这个函数接收先前的count值，并返回一个加一后的值。这样就可以保证定时器每次拿到的是最新的count值，而不是初始值

useRef

使用useRef的方法：useRef可以创建一个可变的引用对象，该对象的current属性可以存储任何值，
并且在组件重新渲染时不会改变。我们可以使用useRef来存储定时器的id，以便在清理函数中清除定时器。
我们也可以使用useRef来存储count的当前值，并在定时器中更新它。这样就可以避免使用state和set函数，从而减少组件的渲染次数。以下是使用useRef的方法的代码：

import React, { useRef, useEffect } from 'react';function App() {const timerRef = useRef(null); // 创建一个引用对象，用于存储定时器的idconst countRef = useRef(0); // 创建一个引用对象，用于存储count的当前值useEffect(() => {timerRef.current = setInterval(() => {// 直接更新countRef.current的值，而不使用state和set函数countRef.current = countRef.current + 1;}, 1000);return () => clearInterval(timerRef.current); // 清理函数中清除定时器}, []);return (<div className="App"><h1>React Hooks 定时器</h1><p>当前计数：{countRef.current}</p></div>);
}
export default App;