我试图建立一个排序算法可视化工具,它将数组的值表示为矩形,每个元素的值对应不同的高度。它应该显示算法过程的每一步,每一个循环发生在一秒之后。然而,每当网页加载时,数组已经排序。我想使它在每一秒之后,被排序的矩形的位置会改变,这样排序算法的每一步都会显示出来。2我的代码如下:
- 索引. tsx**
import SortingAlgorithm from '@/components/sorting-algorithm'
import { Inter } from 'next/font/google'
const App: React.FC = () => {
return(
<div className='headerContainer'>
<h1 className='header'>🆂🅾🆁🆃🅸🅽🅶 🅰🅻🅶🅾🆁🅸🆃🅷🅼 🆅🅸🆂🆄🅰🅻🅸🆉🅴🆁</h1>
<SortingAlgorithm />
</div>
)
}
export default App;
- 排序算法. tsx**
import { Inter } from 'next/font/google'
import React, { useState, useEffect } from 'react'
const SortingAlgorithm: React.FC = () => {
const [arr, setArr] = useState<number[]>([3, 1, 2, 5, 4]);
//Selection sort
while (arr != arr.sort()) {
useEffect(() => {
for (let i = 0; i < arr.length; i++) {
const loop = setTimeout(() => {
let minIndex: number = i;
for (let j = i + 1; j < arr.length; j++) {
if (arr[j] < arr[minIndex]) {
minIndex = j;
}
}
let temp: number = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}, 1000);
return() => clearTimeout(loop);
}
}, []);
}
return arr.map<JSX.Element>((keys) => (
<div className='barsContainer'>
<svg className='bars'>
<rect height={keys * 25} width={100 - (arr.length * 10)} x={arr.indexOf(keys) * 53} y={0}/>
</svg>
</div>
))
}
export default SortingAlgorithm;
我已经在包含排序算法的for循环中实现了setTimeout
。我认为这将是我的问题的完美解决方案,但它似乎并没有改变for循环的循环速度。我也尝试过修改语法,但这似乎并没有真正产生什么影响。至少在正确的方向上指出一点会非常感激。
1条答案
按热度按时间fnx2tebb1#
下面是full solution的示例实现。
下面,请看这个最小的示例,其中包含一个计数器,它以最基本的形式演示了您要完成的任务:
关于钩子的几点注意事项:
1.不要在控制流结构中使用钩子,如
if
,while
等。每次执行react函数时都必须执行钩子,以使它们正常工作。如果检查开发控制台,您可能会看到React警告或错误。setState
来知道何时更新组件。由于您从不调用setArr
,因此您的组件永远不会更新。请参见setState考虑阅读the full documentation on hooks,这样您就可以完全理解它们的预期用途。