Reactjs React排序可视化工具-使用状态而不是setTimeout
我正在学习react，并决定尝试创建一个排序可视化工具。我从bubble sort开始，几乎成功地创建了一个基本的可视化工具<代码>设置超时是我用来应用可视化的主要功能 我觉得在Reactjs React排序可视化工具-使用状态而不是setTimeout,reactjs,sorting,react-hooks,settimeout,visualization,Reactjs,Sorting,React Hooks,Settimeout,Visualization,我正在学习react，并决定尝试创建一个排序可视化工具。我从bubble sort开始，几乎成功地创建了一个基本的可视化工具设置超时是我用来应用可视化的主要功能 我觉得在setTimeout上进行中继并没有充分利用react，我想尝试不同的方法，使用useState钩子进行可视化，并在更改状态时进行重新渲染。我知道useStatehook是异步的，不会立即反映 有没有一种方法可以使用钩子来应用可视化，而不是太依赖于setTimeout 这是我的密码： import React, { useCon
setTimeoutuseStateuseStatesetTimeoutimport React, { useContext, useState, useEffect } from 'react';
const NUMBER_OF_ELEMENTS = 10;
const DEFAULT_COLOR = 'black';
const randomIntFromInterval = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
}
const Dummy = () => {
const [arr, setArr] = useState([]);
const [numberOfElements, setNumberOfElements] = useState(NUMBER_OF_ELEMENTS);
const [doneElements, setDoneElements] = useState([]);
useEffect(() => {
resetArray();
}, []);
const resetArray = () => {
const arr1 = [];
for(let i = 0; i < numberOfElements; i++)
{
arr1[i] = randomIntFromInterval(5, 100);
}
console.log(arr1);
setArr(arr1);
}
const bubbleSort = (arr, n) => {
let i, j, temp, swapped, delay = 1;
for(i = 0; i < n - 1; i++)
{
swapped = false;
for(j = 0; j < n - i - 1; j++)
{
createColor(j, j + 1, delay++, 'darkred');
if(arr[j] > arr[j + 1])
{
// swap arr[j] and arr[j+1]
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
swapped = true;
createAnimation(j, j + 1, delay++);
}
createColor(j, j + 1, delay++, 'black');
}
createSingleColor(n - i - 1, delay++, 'green');
// If no two elements were
// swapped by inner loop, then break
if(swapped === false) break;
}
for(let k = 0; k < n - i - 1; k++) {
createSingleColor(k, delay++, 'green');
}
}
const createAnimation = (one, two, delay) => {
const arrayBars = document.getElementsByClassName('array-bar');
setTimeout(() => {
const barOneHeight = arrayBars[one].style.height;
const barTwoHeight = arrayBars[two].style.height;
arrayBars[two].style.height = `${barOneHeight}`;
arrayBars[one].style.height = `${barTwoHeight}`;
}, 250 * delay);
}
const createColor = (one, two, delay, color) => {
const arrayBars = document.getElementsByClassName('array-bar');
setTimeout(() => {
arrayBars[two].style.backgroundColor = color;
arrayBars[one].style.backgroundColor = color;
}, 250 * delay);
}
const createSingleColor = (index, delay, color) => {
const arrayBars = document.getElementsByClassName('array-bar');
setTimeout(() => {
arrayBars[index].style.backgroundColor = color;
}, 250 * delay);
}
const handleSort = (arr) => {
bubbleSort(arr, arr.length);
}
const handlerRange = (e) => {
setNumberOfElements(e.target.value);
}
return (
<div>
<div className="array-container">
{arr.map((value, idx) => (
<div className="array-bar"
key={idx}
style={{
backgroundColor: 'black',
height: `${value}px`,
width: `${100 / arr.length}%`,
display: 'inline-block',
margin: '0 1px'
}}>
</div>
))}
</div>
<div className="buttons-container">
<button onClick={() => handleSort(arr)}>Sort!</button>
<button onClick={() => resetArray()}>Reset</button>
<button onClick={() => {
setDoneElements([...doneElements, 7]);
console.log(doneElements);}}>print</button>
</div>
<div className="slider-container">
1
<input type="range"
min="1"
max="100"
onChange={(e) => handlerRange(e)}
className="slider"
id="myRange"
/>
100
</div>
{numberOfElements}
</div>
);
}
export default Dummy;
import React，{useContext，useState，useffect}来自“React”；
元素的常数个数=10；
常量默认颜色='黑色'；
常量randomIntFromInterval=（最小值，最大值）=>{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}
常量虚拟=（）=>{
const[arr，setArr]=useState（[]）；
常量[numberOfElements，setNumberOfElements]=useState（元素的数量）；
const[doneElements，setDoneElements]=useState（[]）；
useffect（（）=>{
重置数组（）；
}, []);
常量重置数组=（）=>{
常数arr1=[]；
for（设i=0；i{
设i，j，temp，swapped，延迟=1；
对于（i=0；iarr[j+1]）
{
//交换arr[j]和arr[j+1]
温度=arr[j]；
arr[j]=arr[j+1]；
arr[j+1]=温度；
交换=真；
createAnimation（j，j+1，delay++）；
}
createColor（j，j+1，delay++，“黑色”）；
}
createSingleColor（n-i-1，delay++，“绿色”）；
//如果没有两个元素
//由内部循环交换，然后断开
如果（交换===假）中断；
}
for（设k=0；k{
const arrayBars=document.getElementsByClassName（'array-bar'）；
设置超时（（）=>{
const barOneHeight=arrayBars[one].style.height；
const barTwoHeight=arrayBars[two].style.height；
arrayBars[two].style.height=`${barOneHeight}`；
arrayBars[one].style.height=`${barTwoHeight}`；
}，250*延迟）；
}
const createColor=（一、二、延迟、颜色）=>{
const arrayBars=document.getElementsByClassName（'array-bar'）；
设置超时（（）=>{
arrayBars[two].style.backgroundColor=颜色；
arrayBars[one].style.backgroundColor=颜色；
}，250*延迟）；
}
const createSingleColor=（索引、延迟、颜色）=>{
const arrayBars=document.getElementsByClassName（'array-bar'）；
设置超时（（）=>{
arrayBars[index].style.backgroundColor=颜色；
}，250*延迟）；
}
常量handleSort=（arr）=>{
气泡运动（arr，arr.length）；
}
常量handlerRange=（e）=>{
setNumberOfElements（如目标值）；
}
返回(
{arr.map（（值，idx）=>(
))}
handleSort（arr）}>排序！
resetArray（）}>Reset
{
集合元素（[…集合元素，7]）；
console.log（doneElements）；}>print
1.
handlerRange（e）}
className=“滑块”
id=“myRange”
/>
100
{numberOfElements}
);
}
导出默认虚拟；
泡泡排序setDoneElementsimport React, { useState, useEffect } from 'react';
const shortid = require('shortid');
const randomIntFromInterval = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
}
const Dummy2 = () => {
const [arr, setArr] = useState([]);
const [length, setLength] = useState(10);
const [doneElements, setDoneElements] = useState([]);
const [compareElements, setCompareElements] = useState([]);
useEffect(() => {
generateArray();
}, [length]);
const generateArray = () => {
setDoneElements([]);
setCompareElements([]);
const tempArr = [];
for(let i = 0; i < length; i++) {
tempArr.push(randomIntFromInterval(7, 107));
}
setArr([...tempArr]);
}
const handleLength = (e) => {
setLength(e.target.value);
}
const bubbleSort = () => {
let i, j, swapped, delay = 100;
const tempArr = [...arr];
const tempDoneElements = [...doneElements];
for(i = 0; i < length - 1; i++)
{
swapped = false;
for(j = 0; j < length - i - 1; j++)
{
createColor([j, j + 1], delay, 'COMPARE');
delay += 100;
if(tempArr[j] > tempArr[j + 1])
{
createAnimation(tempArr, j, j + 1, delay);
delay += 100;
swapped = true;
}
createColor([], delay, 'NONE');
delay += 100;
}
tempDoneElements.push(length - i - 1);
createColor(tempDoneElements, delay, 'DONE');
delay += 100;
// If no two elements were
// swapped by inner loop, then break
if(swapped === false) break;
}
for(let k = 0; k < length - i - 1; k++) {
tempDoneElements.push(k);
}
createColor(tempDoneElements, delay, 'DONE');
delay += 100;
}
const createAnimation = (tempArr, indexOne, indexTwo, delay) => {
const temp = tempArr[indexOne];
tempArr[indexOne] = tempArr[indexTwo];
tempArr[indexTwo] = temp;
const newArr = [...tempArr];
setTimeout(() => {
setArr([...newArr]);
}, delay);
}
const createColor = (tempElements, delay, action) => {
switch(action) {
case 'DONE':
const newDoneElements = [...tempElements];
setTimeout(() => {
setDoneElements([...newDoneElements]);
}, delay);
break;
case 'COMPARE':
setTimeout(() => {
setCompareElements([...tempElements]);
}, delay);
break;
default:
setTimeout(() => {
setCompareElements([]);
}, delay);
}
}
const maxVal = Math.max(...arr);
return (
<div>
<div className="array-container" style={{height: '50%'}}>
{arr.map((value, idx) => (
<div className="array-element"
key={shortid.generate()}
style={{height: `${(value * 100 / maxVal).toFixed()}%`,
width: `calc(${100 / length}% - 2px)`,
margin: '0 1px',
display: 'inline-block',
backgroundColor: compareElements.includes(idx) ? 'darkred' :
doneElements.includes(idx) ? 'green' : 'black',
color: 'white'}}
></div>))
}
</div>
<div>
<button onClick={() => generateArray()}>New array</button>
<button onClick={() => bubbleSort()}>Sort</button>
</div>
<div className="slider-container">
1
<input type="range"
min="1"
max="100"
onChange={(e) => handleLength(e)}
className="slider"
id="myRange"
/>
100
</div>
{length}
</div>
);
}
export default Dummy2;
import React，{useState，useffect}来自“React”；
const shortid=需要（'shortid'）；
常量randomIntFromInterval=（最小值，最大值）=>{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}
常数Dummy2=（）=>{
const[arr，setArr]=useState（[]）；
const[length，setLength]=useState（10）；
const[doneElements，setDoneElements]=useState（[]）；
常量[compareElements，setCompareElements]=useState（[]）；
useffect（（）=>{
generatarray（）；
}，[长度]；
const generatarray=（）=>{
集合元素（[]）；
集合比较元素（[]）；
常数tempArr=[]；
for（设i=0；i{
设置长度（即目标值）；
}
常量bubbleSort=（）=>{
设i，j，交换，延迟=100；
常数tempArr=[…arr]；
常量tempDoneElements=[…doneeelements]；
对于（i=0；itempArr[j+1]）
{
创建动画（tempArr，j，j+1，延迟）；
延迟+=100；
交换=真；
}
createColor（[]，延迟，“无”）；
判定元件