javascript - 我可以在 useEffect 钩子(Hook)周围使用 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 函数中调试任何东西。我想知道将逻辑(尤其是钩子(Hook))包装到 iife 中有多坏或多好。我尝试过在 deps 数组中添加条件，但项目中的逻辑太多，一切都停止工作，所以这不是正确的决定。

Answer 1

我会尽可能全面地回答这个问题，请耐心等待。

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

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

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