解决 React useEffect 中的异步竞态条件：一个真实的案例分析

Posted on In

在 React 开发中，useEffect 是一个强大的 Hook，用于处理副作用，比如数据获取、订阅事件等。然而，当它与异步操作结合，并依赖于会频繁变化的 state（如用户切换账户）时，很容易陷入**竞态条件（Race Condition）**的陷阱。

本篇文章将通过一个真实的案例，深入分析这个问题，并提供一个健壮、可复用的解决方案。

问题的根源：useEffect 的异步交错执行

我们的场景是，当用户切换交易账户 (currentExchangeAccount) 时，我们需要：

  1. 取消上一个账户的行情订阅。
  2. 获取新账户的交易对列表。
  3. 对新的交易对进行订阅。

直观的代码可能是这样的：

1
2
3
4
5
6
7
8
9
10
11
useEffect(() => {
  const fetchData = async () => {
    // 1. 取消旧订阅
    await unsubscribeOldData();
    // 2. 获取新数据
    const pairs = await fetchNewData();
    // 3. 订阅新数据
    await subscribeNewData(pairs);
  };
  fetchData();
}, [currentExchangeAccount]);

这个看似无懈可击的逻辑，隐藏着一个巨大的问题。

当 currentExchangeAccount 快速变化时（例如，从 A 切换到 B，又马上切回 A），useEffect 会重新运行。由于 fetchData 是异步的，第二次 useEffect 触发时，第一次 useEffect 的异步操作可能还在进行中。

这会导致一系列混乱：

  • 订阅泄漏（Subscription Leak）：第一次的 useEffect 可能只执行了取消订阅，但还没来得及订阅新的数据，就被第二次的 useEffect 打断了。
  • 重复订阅：两次 useEffect 的异步函数交错执行，可能导致对同一个交易对进行多次订阅。
  • 数据混乱：旧的订阅被错误的取消，而新的订阅又没有被及时建立，导致界面数据显示异常。

我们的代码中尤其使用了 await sleep(500) 这样的延迟，这大大增加了异步操作交错执行的概率，让问题变得更加严重。

解决方案：引入 isLatest 标志来“串行化”异步操作

解决竞态条件的关键在于：确保任何时候都只有一个 useEffect 实例的异步操作能够成功完成。

我们可以通过在 useEffect 中引入一个**可变的标志（mutable flag）**来控制这个执行流。这个标志在 useEffect 的清理函数中被更新，从而阻止旧的异步操作继续执行。

让我们看看如何改造代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
useEffect(() => {
  // 1. 创建一个标志，表示当前 useEffect 实例是否是最新
  let isLatest = true;

  const fetchDataAndSubscribe = async () => {
    // 在开始获取新数据前，同步取消所有旧订阅。
    // useRef 的值在这里总是最新的
    manageMarketSubscription("unsubscribe", subscribeSpotMsgRef.current);
    manageMarketSubscription("unsubscribe", subscribeUmpMsgRef.current);

    // 并行获取所有数据，提高效率
    const [spotPairs, umpPairs] = await Promise.all([
      ExchangesApi.getExchangeMarketsPairs({
        /*...*/
      }),
      ExchangesApi.getExchangeMarketsPairs({
        /*...*/
      }),
    ]);

    // 2. 核心步骤：检查是否被新的实例打断
    if (!isLatest) {
      // 如果 isLatest 为 false，表示有新的 useEffect 实例正在运行
      // 那么当前实例应该立即退出，不做任何订阅操作
      console.log("Operation cancelled, not subscribing.");
      return;
    }

    // 3. 只有最新实例才会执行到这里，进行订阅
    if (spotPairs.length > 0) {
      const newMsg = {
        /* ... */
      };
      subscribeSpotMsgRef.current = newMsg;
      manageMarketSubscription("subscribe", newMsg);
    }
    // ... 对 umpPairs 同样操作 ...
  };

  fetchDataAndSubscribe();

  // 4. 清理函数：在组件卸载或依赖项变化时执行
  return () => {
    // 将 isLatest 标志设为 false，以阻止正在进行的异步操作
    isLatest = false;
    // 再次取消订阅，确保万无一失
    manageMarketSubscription("unsubscribe", subscribeSpotMsgRef.current);
    manageMarketSubscription("unsubscribe", subscribeUmpMsgRef.current);
  };
}, [currentExchangeAccount]);

这个解决方案主要做了以下几点改进：

  1. 移除 sleep()：我们完全去掉了 await sleep()，消除了不必要的延迟，让代码执行更迅速、更可控。
  2. 同步取消订阅：在获取新数据之前，立即取消旧订阅。这避免了在异步等待期间的订阅混乱。
  3. 使用 isLatest 标志：这是解决竞态条件的核心。它确保了只有“最新”的 useEffect 才能执行订阅操作，完美地解决了异步操作交错执行的问题。
  4. Promise.all 优化：将两个数据获取请求并行化，提高了效率。

通过这种模式，我们成功将一个看似简单但暗藏陷阱的异步操作，转变为一个稳健、可预测且无副作用的模式。