我可以在 useEffect 挂钩周围使用 IIFE 吗？答案

【问题标题】：Can I use IIFE around useEffect hooks?我可以在 useEffect 挂钩周围使用 IIFE 吗？
【发布时间】：2021-10-12 23:42:54
【问题描述】：

我正在做一个有很多反模式的项目，我看到的是围绕多个 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 数组中添加条件，但是项目中的逻辑太多，一切都停止工作，所以这不是正确的决定。

【问题讨论】：

为什么不简单地移动效果内的条件？
@RameshReddy，我在我的问题中提到了这一点，它打破了在我应用于这个项目之前编写的逻辑
不，必须在组件的顶层调用钩子。不是有条件的，不是在嵌套函数或循环中。移除条件和 IIFE，以便效果挂钩位于组件主体中。您可能需要在钩子回调中移动条件并将其添加为需要它的依赖项，尽管很难用condition 之类的名称来判断。
Hooks 应该在功能组件的top-level 处无条件调用。我很惊讶这段代码有效。
那一定是condition 总是真实的，并且每个渲染周期都会调用钩子，并且 linter 不知何故不会在 IIFE 上得到响应。 ??????????‍♂️

标签： javascript reactjs react-hooks iife

【解决方案1】：

我尽量彻底回答这个问题，请耐心等待。

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

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

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

【讨论】：