在useEffect hook中应该使用IIFE吗?

问题描述 投票:0回答:3

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

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

      setPosts(json);
    })();
  });
javascript reactjs react-hooks use-effect iife
3个回答
4
投票

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

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

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


0
投票

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


0
投票

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

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

看看这个解释/\

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

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

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

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.