如何在原生JS排序中实时更新React组件的计数状态

问题核心 #

需要在原生JS实现的冒泡排序运行时，实时更新React函数组件中useState维护的比较次数计数器，此前尝试导出组件内更新函数、直接传递状态变量均未生效。

关键问题分析 #

1. 闭包陷阱：直接导出的更新函数会捕获组件渲染时的旧状态值，导致状态更新基于旧值，无法实时反映最新计数。
2. 状态不可变性：传递useState变量本质是传递值的快照，修改该变量不会触发React的状态更新机制。

具体修改步骤 #

1. 改造原生JS的bubbleSort函数

增加一个参数接收React组件的计数更新回调，每次执行比较时调用该回调：

export async function bubbleSort(arr, updateCount) {
    let swapped = false;
    for (var i = 0; i < arr.length - 1; i++) {
        swapped = false;

        for (var j = 0; j < arr.length - 1 - i; j++) {
            // 每次比较执行计数更新
            updateCount();
            
            if (arr[j] > arr[j + 1]) {
                document.getElementById(j).style.backgroundColor = "green";
                document.getElementById(j + 1).style.backgroundColor = "red";
                await delay(50);
                // 假设swap函数已定义
                swap(j, j + 1);
                let temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
                swapped = true;
            } else {
                document.getElementById(j).style.backgroundColor = "green";
                document.getElementById(j + 1).style.backgroundColor = "green";
                await delay(50);
            }

            document.getElementById(j).style.backgroundColor = "";
            document.getElementById(j + 1).style.backgroundColor = "green";
        }

        if (!swapped) {
            for (let k = 0; k <= i; k++) {
                document.getElementById(k).style.backgroundColor = "green";
                await delay(30);
            }
            break;
        }
        if (j == 0 && i == arr.length - 2) document.getElementById(j).style.backgroundColor = "green";
    }
}

2. 调整React组件的状态更新逻辑

使用函数式更新避免闭包问题，并在启动排序时重置计数器、传递更新回调：

function SortingPage() {
  const navigate = useNavigate();
  const [lines, setLines] = useState([]);
  const [bubbleCount, setBubbleCount] = useState(0);

  // 用函数式更新获取最新状态值，避免闭包陷阱
  function updateBubbleCount() {
    setBubbleCount(prev => prev + 1);
  }

  // ... 其他现有函数（resetArray、getWidth等）保持不变 ...

  function bubble() {
    // 每次排序前重置计数器
    setBubbleCount(0);
    // 传递数组副本，避免直接修改React状态数组
    bubbleSort([...lines], updateBubbleCount);
  }

  // ... 渲染部分保持不变 ...
}

为什么这个方案有效 #

1. 函数式更新：setBubbleCount(prev => prev + 1)直接基于最新状态值更新，不会受闭包捕获旧值的影响。
2. 回调传递：将React的状态更新函数作为参数传给bubbleSort，每次比较时触发更新，确保React能实时感知状态变化并重新渲染。
3. 数组副本：传递[...lines]避免直接修改React状态数组，保证状态与DOM的一致性。

内容的提问来源于stack exchange，提问作者Rodolfo