React hooks如何清除定時器并驗證效果
更新時間：2024年10月11日 16:41:43 作者：harmsworth2016
在React中,通過自定義Hook useTimeHook實現(xiàn)定時器的啟動與清除,在App組件中使用Clock組件展示當前時間,利用useEffect鉤子在組件掛載時啟動定時器,同時確保組件卸載時清除定時器,避免內存泄露,這種方式簡化了狀態(tài)管理和副作用的處理
React hooks清除定時器并驗證效果
目錄結構
如下所示：
useTime hook
// src/hooks/common.ts
import { useEffect, useState } from "react";
export function useTime() {
const [time, setTime] = useState<Date>(() => new Date())
useEffect(() => {
const id: NodeJS.Timer = setInterval(() => {
setTime(new Date())
}, 1000)
return () => {
console.log('組件銷毀清除定時器');
clearInterval(id)
}
}, [])
console.log('返回時間')
return time
}Clock.tsx使用useTime hook
// src/test/Clock.tsx
import React from 'react';
import { useTime } from '@/hooks/common';
function Clock() {
const time = useTime()
return (
<h1>{time.toLocaleTimeString()}</h1>
);
}
export default Clock;App.tsx顯示Clock組件
// src/App.tsx
import React, { useState } from 'react';
import Clock from './test/Clock'
import './App.css';
function App() {
const [show, setShow] = useState<boolean>(true)
return (
<div className="App">
<button onClick={() => setShow(!show)}>{show ? '隱藏' : '顯示'}</button>
{show && <Clock />}
</div>
);
}
export default App;顯示時間（開啟定時器）
隱藏時間（清除定時器）
總結
React hook啟用定時器后，在組件銷毀時清除定時器
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
參考：
相關文章
這篇文章主要介紹了antd form表單如何處理自定義組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
使用React?Redux實現(xiàn)React組件之間的數(shù)據(jù)共享
在復雜的React應用中,組件之間的數(shù)據(jù)共享是必不可少的,為了解決這個問題,可以使用React?Redux來管理應用的狀態(tài),并實現(xiàn)組件之間的數(shù)據(jù)共享,在本文中,我們將介紹如何使用React?Redux實現(xiàn)Count和Person組件之間的數(shù)據(jù)共享,需要的朋友可以參考下2024-03-03
React 是一個用于構建用戶界面的 JAVASCRIPT 庫。這篇文章主要介紹了ReactJS中的自定義組件的代碼講解,需要的朋友可以參考下2019-11-11
React Native中ScrollView組件輪播圖與ListView渲染列表組件用法實例分析
這篇文章主要介紹了React Native中ScrollView組件輪播圖與ListView渲染列表組件用法,結合實例形式詳細分析了ScrollView組件輪播圖與ListView渲染列表組件具體功能、使用方法與操作注意事項,需要的朋友可以參考下2020-01-01
本篇文章主要介紹了react router 4.0以上的路由應用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了react源碼中的生命周期和事件系統(tǒng)實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟
這篇文章主要介紹了從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Zustand介紹與使用 React狀態(tài)管理工具的解決方案
本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫,Zustand以簡潔易用、靈活性高及最小化原則等特點脫穎而出,旨在提供簡單而強大的狀態(tài)管理功能2024-10-10
淺析JS中什么是自定義react數(shù)據(jù)驗證組件
我們在做前端表單提交時，經(jīng)常會遇到要對表單中的數(shù)據(jù)進行校驗的問題。這篇文章主要介紹了js中什么是自定義react數(shù)據(jù)驗證組件,需要的朋友可以參考下2018-10-10
React Fragment 和空標簽(＜＞＜/＞)用法及區(qū)別詳解
本文詳細介紹了React中的Fragment和空標簽的使用,包括它們的區(qū)別、使用場景、性能考慮以及最佳實踐,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2025-01-01