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

Question

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

Answer 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 但这只是一个约定，如果需要，您可以创建一个挂钩作为匿名函数。

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

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

Can I use IIFE around useEffect hooks?

javascript

iife

reactjs

react-hooks