算法可视化中的冒泡动画

Question

  state={
    array: [],
    sorted: false,
  };

  sort() {
    var swapped;
    var array = this.state.array;
    do {
        swapped = false;
        for (var i=0; i < array.length-1; i++) {
            if (array[i] > array[i+1]) {
                var temp = array[i];
                array[i] = array[i+1];
                array[i+1] = temp;
                this.setState({ array });
                console.log(array);
                swapped=true;
            }
        }
    } while (swapped);
  }

  renderBars() {
    return this.state.array.map(listValue => (
      <View key={Math.floor(Math.random() * 10000000) + 1}>
        <Text>{listValue}</Text>
        <View style={{ width: 15, height: (listValue * 30), backgroundColor: '#3F51B5', borderRadius: 4 }} />
      </View>
    ));
  }

上述代码在每次状态更改期间都不会重新呈现。我希望像算法可视化器一样实现冒泡动画的冒泡动画，但视图只是在最后重新渲染而不是在每个状态变化。

Answer 1

我认为这很好，它只是渲染太快。下面的版本说明了3秒的睡眠时间，因此您可以看到呈现的每个步骤。

import React, { Component } from 'react';
import {
  Text,
  View
} from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);

    this.state={
      array: [4,3,2,1],
      sorted: false,
    };
  }

  componentWillMount() {
    this.sort();
  }

  async sort() {
    var swapped;
    var array = this.state.array;
    do {
      swapped = false;
      for (var i=0; i < array.length-1; i++) {
        if (array[i] > array[i+1]) {
          var temp = array[i];
          array[i] = array[i+1];
          array[i+1] = temp;
          this.setState({ array });
          console.log(array);
          await this.sleep(3000);
          swapped=true;
        }
      }
    } while (swapped);
  }

  sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  render() {
    return this.state.array.map(listValue => (
        <View key={Math.floor(Math.random() * 10000000) + 1}>
          <Text>{listValue}</Text>
          <View style={{ width: 15, height: (listValue * 30), backgroundColor: '#3F51B5', borderRadius: 4 }} />
        </View>
    ));
  }
}

export default App;

编辑 - @Val是正确的。最好切换到Animated.View

Answer 2

出于性能原因，React将setState调用批处理为一个setState调用。您正在循环中调用setState并且正在批处调用。你也可以像亚当提到的那样睡觉。

我看到还有另外两个问题。你正在直接操纵国家。由于状态更改是批处理的，因此当您设置状态时，它可以被setState调用覆盖。这可能会导致数据在不应该更改时发生变化。如果对数组进行切片，则不会直接操作状态。

var array = this.state.array.slice(); 

我注意到的第二个问题是您使用的是随机键值。这将导致渲染动画出现问题，尤其是在使用LayoutAnimation时。由于键更改了每个渲染，渲染引擎都不会知道此对象应该移动到此位置。如果您想拥有漂亮的冒泡动画，这将非常重要。