自定义钩子检查窗口宽度答案

【问题标题】：Custom hook to check window width自定义钩子检查窗口宽度
【发布时间】：2022-09-23 10:12:31
【问题描述】：

所以我有一个客户挂钩，它返回窗口宽度是否小于 768。我这样做是为了检查移动设备和笔记本电脑的使用情况。

import { useState, useEffect } from \"react\";
const getIsMobile = () => window.innerWidth <= 768;


function CheckMobileHook() {
  const [isMobile, setIsMobile] = useState(getIsMobile());
  useEffect(() => {
    const onResize = () => {
      setIsMobile(getIsMobile());
    };
    window.addEventListener(\"resize\", onResize);
    return () => {
      window.removeEventListener(\"resize\", onResize);
    };
  }, []);
  return isMobile;
}

export default CheckMobileHook;

这个 onResize 方法每次都会被调用，并且状态也会发生变化。

所以我想做类似的事情 -

 const onResize = useCallback(() => {
     setIsMobile(getIsMobile());
  },[getIsMobile()]

但是在依赖数组中传递一个函数没有任何意义。我知道这是错误的，但是当窗口宽度小于或大于 768 时，我怎样才能使这种状态发生变化？

我这样做是为了学习 useCallback

标签： reactjs

【解决方案1】：

这对于useCallback 来说不是一个好的场景，它在每次重新渲染时都运行一个代价高昂的函数时使用。为了优化代价高昂的功能，useCallback 允许我们有点memoize 一个函数，并且仅在依赖项发生更改时才运行它。

在你的情况下，没有办法绕过调用onResize。毕竟，这就是窗口调整大小事件侦听器的全部意义所在。

但是，如果您想避免运行 setIsMobile 状态设置器，除非必要，只需使用条件，如下所示：

const onResize = () => {
    if (getIsMobile() < 768) {
      setIsMobile(getIsMobile());
    }
};

你现在遇到了 react 钩子规则，它规定我们不在条件内运行钩子。

所以，你应该记住的是，React 虚拟 DOM 是为轻松处理此类情况而构建的。 VDOM 非常高效，而不是实际对 DOM 进行重新绘制，这在性能方面将是灾难性的。

总之，这不是useCallback 的好用例。 useState 钩子非常轻量级，useCallback 用于产生显着性能影响的函数。

【讨论】：