Reactjs 什么时候用钩子？这个例子值得吗？

我已经编写了一个钩子来检查浏览器是否是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

不，不值得用这个钩子

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

---

您的浏览器在会话期间可能永远不会更改，因此仅创建一个简单的实用程序功能/模块就足够了。

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

...
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>
  );
};

。。。
从“shifty”导入{tween}；
从“../../hooks/useTop”导入useTop；
//scrollRef是可滚动的容器引用（getElementById）
常量Top=（{scrollRef}）=>{
常量t=scrollRef？useTop（scrollRef）：false；
返回(
{
常量{scrollTop}=scrollRef；
吐温({
发件人：{x:scrollTop}，
收件人：{x:0}，
持续时间：800，
放松：“放松”夸脱，
步骤：（状态）=>{
scrollRef.scrollTop=state.x；
},
});
}}
role=“按钮”
>
);
};

如果我像你说的那样创建一个实用程序模块，我应该在哪里调用该实用程序？在组件useEffect中，并将其存储在状态（就像钩子一样）或仅存储在函数范围中的常量中？该实用程序的用例是什么？如果根据浏览器是否为IE有条件地呈现，则可以在JSX中调用它（如

{isIE（）&&&&:}

，或者可以事先检查

const ConditionalRenderer=（）=>{If isIE（）return null；return}