1import { useState, useEffect } from 'react';
2
3const WindowResizeTracker = () => {
4 const [windowSize, setWindowSize] = useState({
5 width: window.innerWidth,
6 height: window.innerHeight,
7 });
8
9 useEffect(() => {
10 // 更新窗口尺寸的事件处理函数
11 const handleResize = () => {
12 setWindowSize({
13 width: window.innerWidth,
14 height: window.innerHeight,
15 });
16 };
17
18 // 添加事件监听器
19 window.addEventListener('resize', handleResize);
20
21 // 清理函数:非常重要
22 // 组件卸载时移除事件监听器
23 return () => {
24 window.removeEventListener('resize', handleResize);
25 };
26 }, []); // 空依赖数组表示仅在组件挂载时执行
27
28 return (
29 <div className="window-size">
30 <h2>窗口尺寸:</h2>
31 <p>宽度:{windowSize.width}px</p>
32 <p>高度:{windowSize.height}px</p>
33 </div>
34 );
35};
36
37// 另一个例子:计时器(带清理)
38const Timer = () => {
39 const [seconds, setSeconds] = useState(0);
40 const [isRunning, setIsRunning] = useState(false);
41
42 useEffect(() => {
43 let intervalId;
44
45 if (isRunning) {
46 // 启动计时器
47 intervalId = setInterval(() => {
48 setSeconds((prevSeconds) => prevSeconds + 1);
49 }, 1000);
50 }
51
52 // 清理函数
53 return () => {
54 if (intervalId) {
55 clearInterval(intervalId);
56 }
57 };
58 }, [isRunning]); // 仅在isRunning变化时触发
59
60 const handleToggle = () => {
61 setIsRunning((prev) => !prev);
62 };
63
64 const handleReset = () => {
65 setIsRunning(false);
66 setSeconds(0);
67 };
68
69 return (
70 <div className="timer">
71 <h2>计时器</h2>
72 <p>已运行:{seconds} 秒</p>
73 <button onClick={handleToggle}>{isRunning ? '暂停' : '开始'}</button>
74 <button onClick={handleReset}>重置</button>
75 </div>
76 );
77};