React-setState之后返回

Question

我正在创建一个视觉选择排序反应应用程序。每当单击按钮时，我都要执行一次选择选择迭代。为此，我在设置状态后直接返回。我的代码有效，但是似乎太过分了。我想知道，这是否是实现我所做的更好的方法。

谢谢！

const blocks = [];
var globalfinished = 0;
var swap = false;
var swapdisplay = true;

class Square extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null,
            heightSet: 3,
            sorted: false,
            swapped: false,

        };
    }
  render() {
    var myheight = this.props.heightSet + 'em';
    var sort = this.props.sorted;
    var bgcolor = 'grey';
    var key = this.props.value;
    var swapped = this.props.swapped;
      if (sort){
          bgcolor = 'green';
      }
      else if(swapped){
          bgcolor = 'red';
      }
      else{
          bgcolor = 'grey';
      }
    var divHeightStyle = {
    height: myheight,
    backgroundColor: bgcolor,
    };
    return (
      <div
        id={this.props.value}
        value={this.props.heightSet}
        style={divHeightStyle}
        className="square">
        {this.props.value}
      </div>
    );
  }
}

class Rectangle extends React.Component {
    constructor(props){
        super(props);
    };

    render(){
        return (
            <button
                className="rectangle"
                onClick={() => this.props.selectionSort()} >
            </button>
        )

    }
}

class Board extends React.Component {
    constructor(props) {
        super(props);
        const squares = [];
        const sorted = [];
        const swapped = [];
        const min = 1;
        const max = 80;
        const rand1 = min + Math.random() * (max - min)
        const rand2 = min + Math.random() * (max - min)
        const rand3 = min + Math.random() * (max - min)
        const maxbars = 50;
        for(let i=0; i<maxbars; i++){
            let rand = min + Math.random() * (max - min)
            squares[i] = rand;
            sorted[i] = false;
            swapped[i] = false;
        }
        this.state = {
            squares: squares,
            sorted: sorted,
            finished: 0,
            swapped: swapped,
        };

    }
  renderSquare(i, y, z, r) {
    return <Square value={i} heightSet={y} sorted={z} swapped={r}/>;
  }

    swap(a,b){
        let t = this.state.squares[b];
        this.state.squares[b] = this.state.squares[a];
        this.state.squares[a] = t;



    }
selectionSort(){
    let locfinished = this.state.finished;
    let i, j, min_idx;
    let squareResult = this.state.squares;
    let sortedResult = this.state.sorted;
    let swappedResult = this.state.swapped;

    for(let i=0; i<11; i++)
    {
        swap = false;
        min_idx = i;
        for(let j=i+1; j < 12; j++)
        {
            if(squareResult[j] < squareResult[min_idx])
            {
                min_idx = j;
             }
        }
        if (min_idx != i)
        {
                if(swapdisplay)
                {
                swappedResult[globalfinished] = true;
                swappedResult[min_idx] = true;
                this.setState({ squares: squareResult, sorted: sortedResult, finished:locfinished, swapped:swappedResult })
                swapdisplay = false;
                return;
                }
                let temp = squareResult[min_idx];
                squareResult[min_idx] = squareResult[i];
                squareResult[i] = temp;

                sortedResult[globalfinished] = true;
                globalfinished++;
                swap = true;
                swapdisplay = true;
                this.setState({ squares: squareResult, sorted: sortedResult, finished:locfinished, swapped:swappedResult })
                swappedResult[globalfinished] = false;
                swappedResult[min_idx] = false;
                return;
        }
    }
    if(!swap)
        {

                sortedResult[globalfinished] = true;
                globalfinished++;
                this.setState({ squares: squareResult, sorted: sortedResult, finished:locfinished })
        }

}

Answer 1

使用早期的return实际上很好，不过，您的代码可以格式化得更好。

为了改善格式，您可以安装Prettier（如果使用VS Code，则需要安装plugin。

人们建议您应避免过早返回，这可能是因为较旧的编码样式/语言（某些语言仅在函数末尾才允许返回）。通常，提早返回没有性能差异。如果return确实困扰您，您可以尝试在for循环内使用if ... else或break而不是返回。