在useEffect hook中应该使用IIFE吗？

Question

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

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

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

Answer 1

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

你会看到我们的 useEffect 挂钩，我们可以通过使用 IIFE 来使用异步等待语法。就是这样。就这么简单。 IIFE 解锁了在 useEffect 钩子中使用异步等待语法的潜力。

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

Answer 2

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

Answer 3

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

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

看看这个解释/\

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

你正在从嵌套函数内部调用一个钩子，这违反了反应钩子的规则。

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

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

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

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