Question

我在React中有一个模拟Conway生命游戏的应用程序。它由一个简单的2D数组组成，该数组每隔0.01秒更新一次由setInterval（）函数指定的新元素。然而，在前5秒平稳运行后，它会大幅减速，直到每0.5秒左右更新一次。在试图找到导致应用程序如此频繁减速的原因时，我一直处于亏损状态。

以下是渲染2D数组的整个网格组件：

var React = require('react');
var createReactClass = require('create-react-class');
var ReactDOM = require('react-dom');
var Button = require('react-bootstrap').Button;
var Row = require('react-bootstrap').Row;
var Col = require('react-bootstrap').Col;
var FontAwesome = require('react-fontawesome');

// components
var Cell = require('./Cell.jsx');

var Grid = createReactClass({
  getInitialState: function() {
    return {
      matrix: [],
      generations: 0,
      neighborCells: [[0, 1], [1, 0], [-1, 0], [0, -1], [-1, -1], [1, 1], [-1, 1], [1, -1]]
    };
  },

  componentWillMount: function() {
    this.freshGrid();
  },

  freshGrid: function() {
    var matrix = [];
    var dim = this.props.dim;

    var Cell = function() {
      this.neighborsCount = 0;
      this.isAlive = false;
    }

    var counter = 0;
    for (var i = 0; i < dim; i++) {
      var row = [];
      for (var j = 0; j < dim; j++) {
        counter++;
        var cell = new Cell();
        row.push(cell);

        if (counter%2 == 0) {
          cell.isAlive = true;
        }
      }
      matrix.push(row);
    }

    this.setState({matrix: matrix}, function() {
      this.createGrid();
    });
  },

  createGrid: function() {
    this.interval = setInterval(function() {
      this.countNeighbours();
      this.updateCells();
      this.forceUpdate();
      this.clearNeighborsCount();
    }.bind(this), 10);
  },

  countNeighbours: function() {
    var dim = this.props.dim;

    for (var i = 0; i < dim; i++) {
      for (var j = 0; j < dim; j++) {
        this.countNeighboursCell(i, j);
      }
    }
  },

  countNeighboursCell: function(row, col) {
    var neighborCells = this.state.neighborCells;
    var cell = this.state.matrix[row][col];

    for (var i = 0; i < neighborCells.length; i++) {
      var neighborPos = neighborCells[i];
      var x = row + neighborPos[0];
      var y = col + neighborPos[1];

      if (this.isWithinGrid(x, y)) {
        var neighbor = this.state.matrix[x][y];
        if (neighbor.isAlive) {
          cell.neighborsCount++;
        }
      }
    }
  },

  isWithinGrid: function(row, col) {
    var dim = this.props.dim;

    if (row >= 0 && col >= 0 && row < dim && col < dim) {
      return true;
    }
    return false;
  },

  updateCells: function() {
    var dim = this.props.dim;

    for (var i = 0; i < dim; i++) {
      for (var j = 0; j < dim; j++) {
        var currentCell = this.state.matrix[i][j];

        if (currentCell.isAlive && (currentCell.neighborsCount == 2 || currentCell.neighborsCount == 3)) {
          currentCell.isAlive = true;
        } else if (!currentCell.isAlive && currentCell.neighborsCount == 3) {
          currentCell.isAlive = true;
        } else {
          currentCell.isAlive = false;
        }
      }
    }
  },

  clearNeighborsCount: function() {
    var dim = this.props.dim;

    for (var i = 0; i < dim; i++) {
      for (var j = 0; j < dim; j++) {
        this.state.matrix[i][j].neighborsCount = 0;
      }
    }
  },

  togglePause: function(e) {
    if (e.target.innerHTML === 'Pause') {
      clearInterval(this.interval);
      e.target.innerHTML = 'Play';
    } else {
      e.target.innerHTML = 'Pause';
      this.createGrid();
    }
  },

  reset: function() {
    this.freshGrid();
  },

  render: function() {
    var dim = this.props.dim;

    var cells = [];
    for (var i = 0; i < dim; i++) {
      var row = [];
      for (var j = 0; j < dim; j++) {
        row.push(<Cell key={i+j} row={i} col={j} dim={10} isAlive={this.state.matrix[i][j].isAlive} />)
      }
      cells.push(row);
    };

    var gridStyle = {
            width: this.props.dim * 10,
            height: this.props.dim * 10,
            background: "#FAFAFA",
            margin: "0 auto",
            WebKitBoxShadow: "0 0 5px rgba(0, 0, 0, 1)",
            MozBoxShadow: "0 0 5px rgba(0, 0, 0, 1)",
            boxShadow: "0 0 5px rgba(0, 0, 0, 1)"
        };

    return (
      <Row>
        <Col xs={12} md={2}>
          <Button onClick={this.togglePause} bsStyle="warning">Pause</Button>
          {/* <Button onClick={this.reset} bsStyle="danger">Reset</Button> */}
        </Col>

        <Col xs={12} md={10}>
          <div style={gridStyle}>
            {cells}
          </div>
        </Col>
    </Row>
    );
  }
});

module.exports = Grid;

正如您在createGrid（）函数中看到的，我们使用新元素每0.01秒更新一次网格。但是，随着时间的推移它会大大减慢。我试图找到导致它如此沉重的原因。它发生在所有浏览器上，也发生在移动设备上。

编辑：

根据要求，这是Cell.jsx

var React = require('react');
var createReactClass = require('create-react-class');

var Cell = createReactClass({

  render: function() {
    var dim = this.props.dim;

    var cellStyle = {
            width: dim,
            height: dim,
            dislay: "inline-block",
            float: "left",
            border: "1px solid #000",
            background: this.props.isAlive ? "#FFF" : "#151515"
        };

    return(
      <div className="cell" onClick={this.clicked} style={cellStyle}></div>
    );
  }
});

module.exports = Cell;

编辑2：

You can render the grid with this App component

var React = require('react');
var createReactClass = require('create-react-class');

// components
var Grid = require('./Grid.jsx');

var App = createReactClass({
  render: function(){
    return(
      <Grid dim={51}/>
    );
  }
});

module.exports = App;

Answer 1

基于现有代码的一些提示 -

请勿使用计时器。您可以将矩阵渲染一次，然后在componentDidUpdate中调用更新矩阵的函数，而不是计时器。在此函数中，您将使用setState将新矩阵存储回状态，这将为新状态触发render。这将永远持续下去，但不会累积多次执行。
使用不可变状态。当前代码直接引用state.matrix并更新cells。这将改变状态而不重新渲染。您可以使用Object.assign，也可以使用ImmutableJS。
重构代码以按以下方式执行此操作 -

计算矩阵＆gt;渲染＆gt;重复

写一个函数说calculateMatrix，它接受当前矩阵并返回下一个矩阵。编写另一个函数updateMatrix，在当前矩阵上调用calculateMatrix，然后调用setState将新矩阵存储到状态。在updateMatrix和componentDidMount中调用componentDidUpdate。这将启动计算＆gt;渲染＆gt;无限循环重复。

反应Web应用程序遇到严重滞后

1 个答案: