我应该在 useEffect 钩子中使用 IIFE 吗？答案

【问题标题】：Should I use IIFE in useEffect hook?我应该在 useEffect 钩子中使用 IIFE 吗？
【发布时间】：2023-02-24 06:02:00
【问题描述】：

在 useEffect 中使用 IIFE 是好习惯还是我应该声明异步函数然后调用它？

  useEffect(() => {
    (async () => {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
      );
      const json = await response.json();

      setPosts(json);
    })();
  });

【问题讨论】：

你可以离开 IIFE，它应该不会有任何问题。

标签： javascript reactjs react-hooks use-effect iife

【解决方案1】：

许多人可能已经知道，您不能将异步函数传递给 React 中的 useEffect 挂钩。由于 IIFE 的迂回方式，我们仍然可以

对于我们的 useEffect 挂钩，您将看到我们能够通过使用 IIFE 来使用异步等待语法。就是这样。就这么简单。 IIFE 解锁了在 useEffect 钩子中使用异步等待语法的潜力。

结论IIFE 是一种非常强大的 JavaScript 编码实践，可用于许多不同的用例。事实证明，useEffect 也不例外。

【讨论】：

【解决方案2】：

我建议使用 IIFE 而不是声明异步函数并调用它。因为您将在 useEffect 中仅使用一次声明的异步函数，而这恰恰是 IIFE 的用例。

【讨论】：

【解决方案3】：

如果您以某种方式与组件的状态 (useState) 交互，我会反对它。

https://www.reddit.com/r/reactjs/comments/lhj7nb/batching_usestate_in_async_useeffect/

看看这个解释/

换句话说，你正在把反应的批处理问题从它手中拿走。从字面上违背其调解算法。

您正在从嵌套函数内部调用挂钩，这违反了反应挂钩的规则。

如果你最终在上下文中提升这个状态，你将在其他奇怪的东西之间有状态并发、双重重新渲染。

这可以在一个组件上工作，尝试在一个复杂的表单上使用 react-hook-forms 和上下文，以及依赖于服务器的多个选择，然后噩梦就出现了。

如果它违反规则，它就不是一个强大的工具。钩子需要“按顺序”呈现，并且还需要尊重反应调解算法。

React 18 上的新批处理会让任何使用它的人在决定使用它的那一刻后悔。

【讨论】：