在 useEffect 中使用 IIFE 是好习惯还是我应该声明异步函数然后调用它?
useEffect(() => {
(async () => {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts"
);
const json = await response.json();
setPosts(json);
})();
});
你们中的许多人可能已经知道,您不能将异步函数传递给 React 中的 useEffect 挂钩。由于 IIFE 的迂回方式,我们仍然可以
你会看到我们的 useEffect 挂钩,我们可以通过使用 IIFE 来使用异步等待语法。就是这样。就这么简单。 IIFE 解锁了在 useEffect 钩子中使用异步等待语法的潜力。
结论 IIFE 是一种非常强大的 JavaScript 编码实践,可用于许多不同的用例。原来useEffect也不例外
我建议使用 IIFE 而不是声明异步函数并调用它。因为您将在 useEffect 中仅使用一次声明的异步函数,而它正是 IIFE 的用例。
如果您以某种方式与组件的状态(useState)交互,我会反对它。
https://www.reddit.com/r/reactjs/comments/lhj7nb/batching_usestate_in_async_useeffect/
看看这个解释/\
换句话说,你正在把反应批处理的事情从它手中拿走。从字面上违反其调解算法。
你正在从嵌套函数内部调用一个钩子,这违反了反应钩子的规则。
如果你最终在上下文中提升这个状态,你将在其他奇怪的东西之间有状态并发、双重重新渲染。
这可以在一个组件上工作,尝试在一个复杂的表单上使用 react-hook-forms 和上下文,以及依赖于服务器的多个选择,然后噩梦就出现了。
如果违背了规则,它就不是一个强大的工具。 钩子需要“按顺序”呈现,并且还尊重反应调解算法。
React 18 上的新批处理会让任何使用它的人在决定使用它的那一刻后悔。