React hooks如何清除定時器并驗證效果
更新時間：2024年10月11日 16:41:43 作者：harmsworth2016
在React中,通過自定義Hook useTimeHook實現(xiàn)定時器的啟動與清除,在App組件中使用Clock組件展示當前時間,利用useEffect鉤子在組件掛載時啟動定時器,同時確保組件卸載時清除定時器,避免內(nèi)存泄露,這種方式簡化了狀態(tài)管理和副作用的處理
React hooks清除定時器并驗證效果
目錄結(jié)構(gòu)
如下所示：
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;顯示時間（開啟定時器）
隱藏時間（清除定時器）
總結(jié)
React hook啟用定時器后，在組件銷毀時清除定時器
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
參考：
相關(guān)文章
這篇文章主要介紹了React 條件渲染最佳實踐小結(jié)(7種)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-09-09
這篇文章主要為大家介紹了ahooks控制時機的hook實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
React高階組件優(yōu)化文件結(jié)構(gòu)流程詳解
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧2023-01-01
React中useTransition鉤子函數(shù)的使用詳解
React?18的推出標志著React并發(fā)特性的正式到來,其中useTransition鉤子函數(shù)是一個重要的新增功能,下面我們就來學(xué)習一下useTransition鉤子函數(shù)的具體使用吧2024-02-02
React 組件的狀態(tài)下移和內(nèi)容提升的操作方法
這篇文章主要介紹了React 組件的狀態(tài)下移和內(nèi)容提升,通過代碼講解了渲染性能的組件問題結(jié)合實例代碼給大家講解的非常詳細，需要的朋友可以參考下2022-11-11
React組件實例三大核心屬性State props Refs詳解
組件實例的三大核心屬性是：State、Props、Refs。類組件中這三大屬性都存在。函數(shù)式組件中訪問不到 this，也就不存在組件實例這種說法，但由于它的特殊性（函數(shù)可以接收參數(shù)），所以存在Props這種屬性2022-12-12
React特征學(xué)習Form數(shù)據(jù)管理示例詳解
這篇文章主要為大家介紹了React特征學(xué)習Form數(shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了React優(yōu)雅的封裝SvgIcon組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了Modal.confirm是否違反了React模式分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
React Native之prop-types進行屬性確認詳解
本篇文章主要介紹了React Native之prop-types進行屬性確認詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12