用react实现冒泡排序的过程动画效果

最新推荐文章于 2024-07-26 00:07:39 发布

90年的罐头�

最新推荐文章于 2024-07-26 00:07:39 发布

阅读量749

点赞数 1

分类专栏： react 前端 js html 文章标签：冒泡排序 js 前端 react

本文链接：https://blog.csdn.net/weixin_43978604/article/details/100747504

版权

本文通过React展示了冒泡排序的过程，以动画形式详细呈现排序的每一步，帮助理解算法原理。

摘要由CSDN通过智能技术生成

冒泡排序过程动画

效果

bubbleSort.jsx

import React, { Component } from 'react'
import {Button,InputNumber} from 'antd'
export default class BubbleSort extends Component {
    constructor(props){
        super(props)
        this.state={
            arr:[2,4,8,0,9,7,1,5],
            result:[],
            resultDom:[],
            dom:[],
            isSort:false,
        }
    }
    UNSAFE_componentWillMount(){
        this.sort()
    }
    // 冒泡排序
    sort = () => {
        let arr = [...this.state.arr]
        // 保存每次的排序  当前index  比较index  排序结果 对比交换情况
        let result = [{current:-1,sort:-1, data