react中常见使用的window对象方法

在 React 中使用 window 对象的方法可以用于许多不同的场景，比如监听窗口尺寸变化、处理全局事件、或者存取本地存储等。以下是一些常见的例子和使用方法：

监听窗口尺寸变化：

使用 window.addEventListener 监听窗口尺寸变化，并在组件卸载时移除监听器：

import React, { useState, useEffect } from ‘react’;

const WindowSizeComponent = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
const handleResize = () => {
setWindowWidth(window.innerWidth);
};

window.addEventListener('resize', handleResize);

return () => {
  window.removeEventListener('resize', handleResize);
};

}, []);

return (

Window width: {windowWidth}px

);
};

export default WindowSizeComponent;
处理全局事件：

例如，监听全局键盘事件：

import React, { useEffect } from ‘react’;

const KeyPressComponent = () => {
useEffect(() => {
const handleKeyPress = (event) => {
console.log(Key pressed: ${event.key});
};

window.addEventListener('keydown', handleKeyPress);

return () => {
  window.removeEventListener('keydown', handleKeyPress);
};

}, []);

return (

Press any key and check the console.

);
};

export default KeyPressComponent;
使用本地存储：

例如，存取用户偏好设置：

import React, { useState, useEffect } from ‘react’;

const LocalStorageComponent = () => {
const [name, setName] = useState(() => {
return window.localStorage.getItem(‘name’) || ‘’;
});

useEffect(() => {
window.localStorage.setItem(‘name’, name);
}, [name]);

return (

<input
type=“text”
value={name}
onChange={(e) => setName(e.target.value)}
placeholder=“Enter your name”
/>

Your name is: {name}

);
};

export default LocalStorageComponent;
使用 window.location 进行页面导航：

例如，创建一个按钮点击后跳转到另一个页面：

import React from ‘react’;

const NavigationComponent = () => {
const handleButtonClick = () => {
window.location.href = ‘https://www.example.com’;
};

return (

Go to Example.com

);
};

export default NavigationComponent;
这些例子展示了如何在 React 组件中使用 window 对象的方法来处理各种全局任务。在使用这些方法时，请注意在组件卸载时清理任何事件监听器，以避免内存泄漏。