我很难可视化排序算法

Question

我正在尝试与React可视化排序算法，我的算法工作正常，但我想将其链接到Divs上的Divs，因为分类算法对给定的数组进行了变化，我只能在最后阶段工作，例如，DOM上的Divs从未排序的数组中拿出高度，当我单击“排序”按钮时，而不是随着算法对未分类数组的排序，而不是动态更改其高度时，他们只是等待删除算法完成排序，然后在一个实例中等待Div从未分类的高度转到排序的高度（我试图做SetteMeTOut，但它对我的预期从未有效，它只是进行一次超时而不是在每次迭代中进行）。 这是我的代码：

function App() {
  const [array, setArray] = useState();
  const elements = useRef();
  const test = (Array) => { 
      if(Array){
        for(let i=0; i < Array.length; i++){
          elements.current.children[i].style.height = `${Array[i]*2}vh`;
        }
      } 
  };
  useEffect(()=> {
    const startArray = [];
    for(let i=0; i < 51; i++){
      let randomNumber = Math.floor(Math.random() * 27);
      if(randomNumber !== 0){
        startArray.push(randomNumber)
      }
    }
    setArray(startArray)
  }, [])
  const bubbleSort = arraY => {
    let iteration = true;
    let shouldContinue = false;
    let count = arraY.length-1;
    while(iteration){
        shouldContinue = false
        if(count > 0){
            for(let i=0; i < count; i++){
              shouldContinue = true;
                if(arraY[i] > arraY[i+1]){
                  let smaller = arraY[i+1];
                  arraY[i+1] = arraY[i];
                  arraY[i] = smaller;
                  test(arraY);
                  }
                }
        }
            count = count -1

            if(!shouldContinue){
                iteration = false
            }
    }
    return array
  }
  const sort = ()=> {
    bubbleSort(array);
  }

  return (
    <div className="App">
      <nav>
        <h1 onClick={sort}>BUBBLE SORT</h1>
        <h1 onClick={sort}>--- SORT</h1>
        <h1 onClick={sort}>--- SORT</h1>
        <h1 onClick={sort}>--- SORT</h1>
      </nav>
      <div className='container' ref={elements}>
        {array && array.map(item=>{
          return <div style={{height: `${item*2}vh`}}></div>
        })
        }
      </div>
    </div>
  );
}

任何帮助都将受到赞赏

Answer 1

您需要执行一种操作，然后设置状态，以便对重新呈现。您还需要设置一些超时，以避免一切都如此迅速地发生，您什么都看不到任何东西。类似的事情：

const [currentlyAt, setCurrentlyAt] = useState(0);

const bubbleSort () => {

   const newArray = [...]
   // perform one step of bubble sort, storing my position in the sort
   // with setCurrentlyAt, so I can resume it next time I'm called
   
   setArray(newArray);
   setTimeout(() => bubbleSort(), 500);  
}

这允许执行一个步骤（单个项目交换），状态更新，以便它将恢复，并且超时会为用户提供时间在恢复泡泡排序之前被用户看到并进行操作。下一个交换。

另外，请不要使用array和array作为变量名称，以避免阴影array，使用部分索要或至少arr。而且，您无需useref，您的逻辑是您在数组上映射的逻辑，并且基于数组值的div高度可以正常工作，您不想使用Ref手动编辑样式。