高效管理递归函数中的条件停止机制

const [stopVisiting, setStopVisiting] = useState(false);

const startVisiting = (visElement) => {
  // 1. 尝试设置停止状态
  if (visElement.i === endElement.i && visElement.j === endElement.j) {
    setStopVisiting(true); // 异步更新，当前visitingState仍为false
  }

  if (visElement.wall === true) return;

  // 2. 检查停止状态
  if (stopVisiting === true) { // 此时stopVisiting可能仍为false
    console.log("Stop the function here");
    return;
  } else {
    if (visElement["visited"] === false) {
      // ... 标记访问 ...
      setTimeout(() => {
        // ... 递归调用 ...
      }, 500);
    }
  }
};

import React, { useState, useEffect } from 'react';

// 假设 grid 和 endElement 在组件外部或通过 props/context 提供
// 这里为了示例完整性，我们假设它们是可访问的
// const [grid, setGrid] = useState(...);
// const endElement = { i: ..., j: ..., visited: false }; // 假设endElement是一个对象引用

function PathfindingComponent() {
  // 示例用的grid和endElement，实际应用中可能从props或更复杂的state管理
  const [grid, setGrid] = useState(() => {
    // 假设一个 40x60 的网格
    const initialGrid = Array(40).fill(null).map((_, i) =>
      Array(60).fill(null).map((_, j) => ({
        i, j, visited: false, wall: false // 默认不是墙，未访问
      }))
    );
    // 假设起点和终点
    initialGrid[0][0].isStart = true;
    initialGrid[39][59].isEnd = true;
    return initialGrid;
  });

  // 终点元素的引用
  const endElement = grid[39][59]; // 假设终点在 grid[39][59]

  const startVisiting = (visElement) => {
    // 统一的停止条件检查：
    // 1. 遇到墙壁
    // 2. 元素已被访问过（避免重复探索）
    // 3. 终点已被访问（表示路径已找到，停止所有进一步的探索）
    if (visElement.wall || visElement.visited || endElement.visited) {
      return;
    }

    // 标记当前元素为已访问
    // visElement 是 grid 数组中元素的直接引用，所以直接修改会反映在 grid 中
    visElement.visited = true;
    // 触发组件重新渲染以更新UI（如果需要显示访问路径）
    setGrid([...grid]); // 浅拷贝触发React更新

    // 使用 setTimeout 模拟异步探索，保持原有的视觉效果
    setTimeout(() => {
      const { i, j } = visElement; // 解构赋值，提高代码可读性

      // 递归探索相邻节点
      // 检查边界条件
      if (i > 0) startVisiting(grid[i - 1][j]); // 上
      if (i < 39) startVisiting(grid[i + 1][j]); // 下
      if (j > 0) startVisiting(grid[i][j - 1]); // 左
      if (j < 59) startVisiting(grid[i][j + 1]); // 右
    }, 50); // 适当缩短延迟以加快演示
  };

  // 可以在某个事件触发时启动路径搜索，例如组件挂载后
  useEffect(() => {
    // 假设起点是 grid[0][0]
    const startElement = grid[0][0];
    if (startElement) {
      // startVisiting(startElement); // 实际应用中可能通过按钮点击等触发
    }
  }, [grid]); // 依赖 grid 确保在 grid 初始化后执行

  return (
    <div>
      <h1>Pathfinding Visualization</h1>
      {/* 渲染网格的逻辑 */}
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(60, 15px)` }}>
        {grid.map((row, rowIndex) =>
          row.map((cell, colIndex) => (
            <div
              key={`${rowIndex}-${colIndex}`}
              style={{
                width: '15px',
                height: '15px',
                border: '1px solid #eee',
                backgroundColor: cell.isStart ? 'green' : cell.isEnd ? 'red' : cell.wall ? 'black' : cell.visited ? 'lightblue' : 'white',
              }}
            ></div>
          ))
        )}
      </div>
      <button onClick={() => startVisiting(grid[0][0])}>Start Pathfinding</button>
    </div>
  );
}

export default PathfindingComponent;

if (visElement.wall || visElement.visited || endElement.visited) {
  return;
}

var newGrid = [...grid];
newGrid[visElement.i][visElement.j]["visited"] = true;
setGrid(newGrid);
visElement["visited"] = true; // 这行是多余的，因为visElement已经是newGrid中对象的引用