编写自定义 useWindowSize React Hook
useWindowSize 的作用
撰写引子
观看实际演示
React Hooks 最酷的功能之一就是你可以创建自己的 Hook！在这篇文章中，我们将快速编写我们自己的useWindowSizeHook。
useWindowSize 的作用
今天我们要创建useWindowSize自定义钩子，是为了确保在窗口innerHeight及其innerWidth属性发生变化时，我们始终能够访问它们。为此，我们将接入窗口的onresize事件监听器。
撰写引子
由于我们需要维护窗口大小信息，我们将使用useState一个包含初始窗口的二元数组作为默认值。
const { useState } = React;
function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
return size;
}
当然，这不会是动态的。要实现动态效果，我们需要使用窗口大小调整事件处理程序。现在，我们只需要设置一次事件监听器，所以我们会使用一个useEffect带有空依赖数组的钩子来实现。
const { useEffect, useState } = React;
function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
useEffect(() => {
const handleResize = () => {
setSize([window.innerHeight, window.innerWidth]);
}
window.addEventListener("resize", handleResize);
}, []);
return size;
}
太棒了，现在我们已经添加了一个事件监听器，setSize每当我们的窗口大小调整时，我们都会收到通知。
我们还需要做最后一件事：在我们的钩子函数中添加一个清理函数useEffect，以确保在组件卸载时移除事件监听器。
const { useEffect, useState } = React;
function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
useEffect(() => {
const handleResize = () => {
setSize([window.innerHeight, window.innerWidth]);
}
window.addEventListener("resize", handleResize);
// Clean up!
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return size;
}
观看实际演示
我们的最终代码和 Codepen 示例如下！
const { useEffect, useState } = React;
function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
useEffect(() => {
const handleResize = () => {
setSize([window.innerHeight, window.innerWidth]);
}
window.addEventListener("resize", handleResize);
// Clean up!
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return size;
}
const App = () => {
const [height, width] = useWindowSize();
return(
<div className="box">
<h1>useWindowSize Hook</h1>
<p>
height: {height}<br />
width: {width}
</p>
</div>
);
}