我可以在useEffect钩子周围使用IIFE吗？

html5 • • 问答

我正在做一个有很多反模式的项目，我看到的是围绕多个 useEffects 的 IIFE，这是我所拥有的：

condition &&
      (() => {
        useEffect(() => {
          const calOffsetTimeout = setTimeout(() => {
            calcOffsetWidth();
          }, 150);
          return () => {
            clearTimeout(calOffsetTimeout);
          };
        }, [menuWidth.isExpanded, pdfWrapperRef.current]);

        useEffect(() => {
          calcOffsetWidth();
        }, [pdfWrapperRef, desiredScale, zooming]);

        useEffect(() => {
          calcOffsetWidth();
          return () => pdf && pdf.destroy();
        }, [pdf]);

        useEffect(() => {
          window.addEventListener('resize', calcOffsetWidth);

          return () => {
            window.removeEventListener('resize', calcOffsetWidth);
          };
        }, []);
      })();

它正在工作，但缺点是我无法在这个 iife 函数中调试任何东西。我想知道将逻辑（尤其是钩子）包装到 iife 中是好是坏。我尝试的是在 deps 数组中添加条件，但是项目中的逻辑太多，一切都停止工作，所以这不是正确的决定。

回答

我试着尽可能彻底地回答这个问题，请耐心等待。

从技术上讲，您可以在任何挂钩调用中使用 IIFE。因此，从正确性的角度来看，IIFE 不会造成问题，但condition它的前面却有问题。原因如下：所有原始的 React 钩子useEffect、useState、useRef等都在内部连接到一些 React 簿记，这绝对取决于在一个特定渲染函数执行期间发生的钩子调用的数量和顺序；猜猜 React 如何区分你的foo状态和你的bar状态const [foo] = useState(); const [bar] = useState();？简单：两个钩子调用的状态都保存在一个数组中；第一个调用获得第一个槽位，第二个调用获得第二个槽位，依此类推。因此，当您的条件在运行时从 true 变为 false 并且您碰巧有其他useEffect在有条件保护的表达式之后调用这些将与最初为useEffect表达式内部创建的插槽相关联。混乱。那么自定义钩子呢？好吧，最终它们是建立在原始 React 钩子上的，因此适用相同的规则。

那么为什么 IIFE 是可能的呢？从技术上讲，您的 IIFE 只是一个匿名的自定义钩子。什么是自定义钩子：您可以定义一个内部使用钩子的函数，并像使用任何原始 React 钩子一样使用新函数。根据约定，挂钩已命名，useXXX但这只是约定，如果需要，您可以将挂钩创建为匿名函数。

这样做是不好的做法吗？是的。它令人困惑，并没有带来任何有用的东西。如果你想分离一些钩子调用，那么就让它成为一个自定义钩子，给它一个有意义的名字，你可以随意使用输入参数和返回值。

以上是我可以在useEffect钩子周围使用IIFE吗？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>