Question

我写了一个钩子来检查浏览器是否是IE，以便我可以重新利用逻辑，而不必在每个组件中编写它。.


const useIsIE = () => {
    const [isIE, setIsIE] = useState(false);

    useEffect(() => {
        const ua = navigator.userAgent;
        const isIe = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;

        setIsIE(isIe);
    }, []);

    return isIE;
}

export default useIsIE;

使用该挂钩是否值得？我不确定是否是个好主意，因为那样的话，当我可以简单地使用像这样的函数时，我为每个钩子调用存储一个状态和一个效果（性能不好？）。

export default () => ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;

您怎么看？是否值得使用该挂钩？如果没有，我什么时候应该使用钩子？什么时候不使用？

ty

Answer 1

不。不值得使用该钩子。

当需要使用React的底层状态或生命周期机制时，需要使用一个钩子。

您的浏览器在会话期间可能永远都不会改变，因此只需创建一个简单的实用程序功能/模块即可。

Answer 2

我建议将浏览器检查设置为常量而不是函数，否则浏览器将永远不会更改。

...
export const isChrome = /Chrome/.test(userAgent) && /Google Inc/.test(navigator.vendor);
export const isIOSChrome = /CriOS/.test(userAgent);
export const isMac = (navigator.platform.toUpperCase().indexOf('MAC') >= 0);
export const isIOS = /iphone|ipad|ipod/.test(userAgent.toLowerCase());
...

这是一个简单的钩子，用于检查元素是否已滚动了一定数量的像素

const useTop = (scrollable) => {
  const [show, set] = useState(false);

  useEffect(() => {
    const scroll = () => {
      const { scrollTop } = scrollable;
      set(scrollTop >= 50);
    };

    const throttledScroll = throttle(scroll, 200);

    scrollable.addEventListener('scroll', throttledScroll, false);

    return () => {
      scrollable.removeEventListener('scroll', throttledScroll, false);
    };
  }, [show]);

  return show;
};

然后您可以在“至顶部”按钮中使用它以使其可见

...
import { tween } from 'shifty';
import useTop from '../../hooks/useTop';

// scrollRef is your scrollable container ref (getElementById)
const Top = ({ scrollRef }) => {
  const t = scrollRef ? useTop(scrollRef) : false;
  return (
    <div
      className={`to-top ${t ? 'show' : ''}`}
      onClick={() => {
        const { scrollTop } = scrollRef;
        tween({
          from: { x: scrollTop },
          to: { x: 0 },
          duration: 800,
          easing: 'easeInOutQuart',
          step: (state) => {
            scrollRef.scrollTop = state.x;
          },
        });
      }}
      role="button"
    >
      <span><ChevronUp size={18} /></span>
    </div>
  );
};

何时使用挂钩？这个例子值得吗？

2 个答案: