React hooks怎样清除定时器并验证效果

2024-11-2 22:34| 发布者: db4d5a85| 查看: 63| 评论: 0

摘要: 目录React hooks清除定时器并验证效果目录结构useTime hookClock.tsx使用useTime hookApp.tsx表现Clock组件表现时间（开启定时器）隐蔽时间（清除定时器）总结React hooks清除定时器并验证效果目录结构如下所示：

React hooks清除定时器并验证效果

目录结构

如下所示：

useTime hook

[code]// 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 }[/code]

Clock.tsx使用useTime hook

[code]// 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;[/code]

App.tsx表现Clock组件

[code]// 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;[/code]