react-hooks,自定义hooks监听窗口大小

275 阅读1分钟

` import React, { useCallback, useEffect, useState } from "react";

function useWinSize() { const [size, sizeSet] = useState({ width: document.documentElement.clientWidth, heigth: document.documentElement.clientHeight, }); const onSize = useCallback(() => { sizeSet({ width: document.documentElement.clientWidth, heigth: document.documentElement.clientHeight, }); }, []); useEffect(() => { window.addEventListener("resize", onSize); return () => { window.removeEventListener("resize", onSize); }; }, []); return size; }

export default function Test1() { const size = useWinSize(); return ( <>

页面Size:{size.width}-{size.heigth}

</> ); }

`