5:["$","div",null,{"children":[["$","style",null,{"children":"*{margin:0;padding:0}"}],["$","a",null,{"className":"return-article fixed top-1 right-2 z-50 text-sky-400 hover:text-sky-500","href":"/demos/20191115/react-useWinResize.html","children":"回到样例"}],null,null,["$","div",null,{"dangerouslySetInnerHTML":{"__html":"

\r\n

调节浏览器窗口试试看

"}}],["$","div",null,{"dangerouslySetInnerHTML":{"__html":"\r\n\r\n"}}],["$","script",null,{"type":"text/babel","dangerouslySetInnerHTML":{"__html":"const { useState, useEffect, useCallback } = React;\r\n\r\nconst useWinResize = () => {\r\n const [size, setSize] = useState({\r\n width: document.documentElement.clientWidth,\r\n height: document.documentElement.clientHeight,\r\n });\r\n const resize = useCallback(() => {\r\n setSize({\r\n width: document.documentElement.clientWidth,\r\n height: document.documentElement.clientHeight,\r\n });\r\n }, []);\r\n useEffect(() => {\r\n window.addEventListener(\"resize\", resize);\r\n return () => window.removeEventListener(\"resize\", resize);\r\n }, []);\r\n return size;\r\n};\r\n\r\nconst Home = () => {\r\n const { width, height } = useWinResize();\r\n\r\n return (\r\n

\r\n

width: {width}

\r\n

height: {height}

\r\n

\r\n );\r\n};\r\nReactDOM.render(, document.getElementById(\"app\"));"}}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"window.addEventListener('load', function () {\n if (window.parent !== window) {\n // 在 iframe 中\n // 隐藏回到文章的按钮\n document.querySelector('.return-article').style.display = 'none';\n // 隐藏底部的声明\n document.querySelector('.common-footer').style.display = 'none';\n }\n});"}}]]}]