如何在不同调用之间的 React useEffect 挂钩中获取竞争条件标志？

Question

这个问题可能是一个简单的问题，但我在搜索中没有找到任何内容。不同的 useEffect 挂钩调用如何共享获取竞争条件标志中的值？

我的意思是，在这个链接：race Conditions in fetching data with useEffect hook中，作者使用标志

active

来控制获取时的竞争条件。我想知道 useEffect 钩子的上一个（或下一个）调用如何访问清理函数返回的值

false

（该值如何共享？）。以及它在 javascript 调用堆栈中如何工作。

Answer 1

useEffect

钩子的上一个（或下一个）调用如何访问清理函数的返回值？价值如何共享？

根本不共享。每个效果执行都有自己的

active

值 - 它仅在异步

fetchData

函数和返回的清理函数之间共享，它们都是同一范围内的闭包。

只是当组件状态发生变化时，react 会清理上次渲染的效果，然后再次运行效果。当效果处于活动状态时，它会记住返回的清理函数（如果有），并在效果应该结束时调用它。

Answer 2

我也对这篇文章感到非常困惑。作用域并没有什么神奇之处，每个清理函数只能访问其作用域内定义的

active

实例。关键细节是，尽管 useEffect 函数调用有一个长时间运行的 API 请求，但该函数本身几乎立即返回，并带有待处理的 Promise。因此，当您第二次单击获取按钮时，第一个请求的清理功能会立即运行，并将请求 1 的

active

设置为

false

。

使用提供的 CodeSandbox 的示例时间线：

1. 获取按钮按 1。
2. useEffect 函数运行：

   active1 = true

   ，API

   request1

   已发送。
3. 待定承诺

   request1

   返回立即。

   request1

   已未完成。
4. 获取按钮按 2。
5. 在 useEffect 函数再次运行之前，按 1 次按钮清理运行（即使

   request1

   尚未完成！）：

   active1 = false

   。
6. useEffect 函数再次运行：

   active2 = true

   ，API

   request2

   已发送。

7. request1

   最终完成，但其结果被忽略，因为

   active1

   在步骤 5 中设置为 false。

8. request2

   终于完成了，并且使用了它的结果，因为它

   active2

   仍然是true。

分叉的 CodeSandbox 添加了

console.log

帮助我解决了问题。