实现一个 useWindowSize Hook，它返回窗口的当前高度和宽度（window.innerHeight 和 window.innerWidth）。如果屏幕属性发生变化，它应该重新渲染组件。
export default function Component() {const screen = useWindowSize();return (<div><p>The current window dimensions are:</p><code>{JSON.stringify(screen, null, 2)}</code></div>);}
无。
该 Hook 返回一个具有以下属性的对象：
height: number：屏幕的当前高度width: number：屏幕的当前宽度实现一个 useWindowSize Hook，它返回窗口的当前高度和宽度（window.innerHeight 和 window.innerWidth）。如果屏幕属性发生变化，它应该重新渲染组件。
export default function Component() {const screen = useWindowSize();return (<div><p>The current window dimensions are:</p><code>{JSON.stringify(screen, null, 2)}</code></div>);}
无。
该 Hook 返回一个具有以下属性的对象：
height: number：屏幕的当前高度width: number：屏幕的当前宽度可以使用 useState 钩子实现 useWindowSize 钩子，以存储当前的屏幕属性，并使用 useLayoutEffect 钩子在调整屏幕大小时更新属性。 我们可以将事件侦听器附加到 window 对象上的 resize 事件 以更新属性状态。
使用 useLayoutEffect 而不是 useEffect 以确保在浏览器绘制后同步更新大小。 这对于依赖于窗口大小的动画和其他视觉效果非常重要。
我们重新创建 windowSize 对象，这样用户就不会意外地改变原始对象。
import { useState, useLayoutEffect } from 'react';interface WindowSize {height: number;width: number;}export default function useWindowSize(): WindowSize {const [windowSize, setWindowSize] = useState<WindowSize>({height: 0,width: 0,});useLayoutEffect(() => {const resize = () =>setWindowSize({height: window.innerHeight,width: window.innerWidth,});resize();window.addEventListener('resize', resize);return () => {window.removeEventListener('resize', resize);};}, []);return windowSize;}
console.log()语句将显示在此处。