Визуализируйте пузырьковую сортировку - PullRequest
Новая
       7

Визуализируйте пузырьковую сортировку

0 голосов
/ 15 марта 2019

Я пытаюсь лучше понять реакцию и алгоритмы, поэтому я решил реализовать визуальную сортировку bubbleSort.

Задача

Я могу генерировать случайный массив чисел + сортировать значения и отображать их ... но Я не могу понять, как сделать анимацию обмена между двумя элементами.

Код 

import React, {Component} from 'react';
import './Chart.css';


class Chart extends Component {

    state = {
        columns: [],
        buttonPressed: false,
    }

    bubbleSort = (inputArr) => {
        let len = inputArr.length;
        for (let i = 0; i < len; i++) {
            for (let j = 0; j < len; j++) {
                if (inputArr[j] > inputArr[j + 1]) {
                    let tmp = inputArr[j];
                    inputArr[j] = inputArr[j + 1];
                    inputArr[j + 1] = tmp;
                }
            }
        }
        return inputArr;
    };

    toggleOn = () =>{
        this.setState({
            columns: this.props.columns,
            buttonPressed: !this.state.buttonPressed,
        });
        let numbers = this.props.columns;
        this.bubbleSort(numbers);
    }

    render() {

        //riformulare queste tre righe di codice
        //sarebbe opportuno pensare ad un componente bar? 
        const numbers = this.props.columns;
        const bar = numbers.map((number) =>
            <div className="bar" style={{height: number+'px' }}>{number}</div>
        );

        return (
            <div>
                {numbers.length > 0 ?  
                <div>
                    <button className="sortButton" onClick={this.toggleOn}>Sort with Bubblesort</button>
                    <div className="chart">
                    {bar}
                    </div>
                </div>
                    : null      
                }
            </div>
        );
    }
}

export default Chart;

Соображения

1) this.props.columns - массив, заполненный случайными числами.

Я видел что-то похожее в этой ссылке, не могли бы вы немного помочь мне с какой-нибудь отправной точкой?

https://codepen.io/lonekorean/pen/bqjzqr

2) это хранилище, в котором вы найдете все компоненты:

GitHub репозиторий

...