react如何获取浏览器的高度
获取浏览器高度的方法
在React中获取浏览器窗口高度可以通过监听window对象的resize事件，并使用window.innerHeight属性实现。
import React, { useState, useEffect } from 'react';
function WindowHeightTracker() {
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
useEffect(() => {
const handleResize = () => {
setWindowHeight(window.innerHeight);
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return <div>当前浏览器高度: {windowHeight}px</div>;
}自定义Hook封装
可以将获取窗口高度的逻辑封装成自定义Hook，方便复用。
import { useState, useEffect } from 'react';
function useWindowHeight() {
const [height, setHeight] = useState(window.innerHeight);
useEffect(() => {
const handleResize = () => setHeight(window.innerHeight);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return height;
}
// 使用示例
function App() {
const height = useWindowHeight();
return <div>窗口高度: {height}px</div>;
}服务端渲染(SSR)兼容方案
在服务端渲染环境中，window对象不存在，需要添加条件判断防止报错。
function useWindowHeight() {
const [height, setHeight] = useState(
typeof window !== 'undefined' ? window.innerHeight : 0
);
useEffect(() => {
if (typeof window === 'undefined') return;
const handleResize = () => setHeight(window.innerHeight);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return height;
}性能优化建议
频繁触发resize事件会影响性能，可以使用防抖(debounce)技术优化。
import { useState, useEffect } from 'react';
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
function useWindowHeight() {
const [height, setHeight] = useState(
typeof window !== 'undefined' ? window.innerHeight : 0
);
useEffect(() => {
if (typeof window === 'undefined') return;
const handleResize = () => setHeight(window.innerHeight);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
const debouncedHeight = useDebounce(height, 100);
return debouncedHeight;
}
