React Hooks 监听浏览器宽高

const getWindowSize = () => ({

innerHeight: window.innerHeight,

innerWidth: window.innerWidth,

});

const [windowSize, setWindowSize] = useState(getWindowSize());

const handleResize = () => {

setWindowSize(getWindowSize());

};

useEffect(() => {

// 监听

window.addEventListener('resize', handleResize);

 

// 销毁

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

}, []);

 

此时，组件可以根据windowSize对象里面的key进行不同的展示了