Game Of life (React.js + Redux)的性能问题

Problems with performance on Game Of life (React.js + Redux)

本文关键字：Redux 性能 问题 js Of life React Game      更新时间：2023-09-26

我的Game Of Life自动运行时遇到了一些问题。为此，我试图设置setInterval并触发现在每次有人单击Next时触发的函数。但是它给我带来了很多问题。

主要问题是，当我设置setInterval(() => this.handleChange()， 100)时，游戏的移动非常缓慢，最终崩溃。

class Board extends React.Component{ 
 handleChange(){ [.........] //just to indicate that here is more code that is not showing and dont think it is important to the question.
nextMovement() [...........]
  render(){
   var createBoard = this.props.board.map((idx) => {
      return <Cell
                 onClick={() => this.props.toggleAlive(idx.index)}
                 key = {idx.index}
                 index = {idx.index}
                 col = {idx.col}
                 row = {idx.row}
                 val = {idx.val}                
                 />
    });
    return(
      <div className="board">
           {createBoard}
        <button className="btn btn-danger" onClick={()=>this.handleChange()}>Next</button> 
        {setInterval(() => this.handleChange(), 100)}
      </div>
    );
  }
}

/* - - - Reducers - - - */

在这里你可以找到我的codePen以及看到完整的代码。

http://codepen.io/DiazPedroAbel/pen/bwNQAJ

我也在stackOverFlow上看这个问题，他似乎和我有同样的问题，但最后为了解决这个问题，他开始使用画布。

我也想知道我的游戏的低性能是否是由于我创建下一个棋盘的方式。我只有两个板子，一个是实际板子，另一个是包含所有新动作的板子，当我最终填满这个newBoard时，我改变触发动作状态的板子。或者问题是我在setInterval函数上做错了什么。

提前感谢，任何帮助都将是感激的。

要解决这个问题，您应该添加

shouldComponentUpdate(next) {
  let props=this.props; 
  return props.col!==next.col || props.row !== next.row || props.val!==next. val;
}

到你的Cell类。这将确保只有更改的单元格被重新渲染。

Redux通常很擅长优化这些东西，但是你的设置有两个问题:

  • 你的Cell类不是connect类。这意味着Redux无法帮助控制其渲染。如果你想要，然后通过row/col作为道具，但让它从mapStateToProps的Redux获得val。
  • 通过替换来更新单板。只要新板中没有改变的单元格引用与旧板相同的对象，这就可以工作。这就是Redux检查单元格是否已更改的方式。复制旧板时确保是浅拷贝，更新单元格时，用一个全新的对象替换旧的单元格对象。记住:不允许修改处于Redux状态的对象。但是你可以修改数组本身因为它是一个副本这意味着你可以替换单元格而不修改原始单元格。如果Redux中的单元格只包含数字，那么您不必担心它，因为使用Number时，值是标识。这意味着如果您写入相同的值，Redux将看到它是相同的。Redux无法检查两个不同的对象是否具有完全相同的属性，因为它花费的时间太长了。

使用上面的shouldComponentUpdate使得没有必要做这些事情，但你可能应该这样做，因为这是一个Redux的方式。没有这些更改，您就不能很好地使用Redux。事实上，你几乎失去了Redux-React的所有好处。

两种方法都会使你的棋盘快速，但是前提是只有有限的棋盘药水会改变。如果整个电路板都在闪烁，那么除了使用不同的技术(如Canvas或React-Canvas)之外，您无能为力。DOM很慢。

你可以尝试解决以下两点:1) setInterval是一个有点危险的东西，如果你的步骤可能跑得比你的间隔长。你会霸占浏览器。所以，在步骤完成后，使用setTimeout来触发下一步。

2)作为旁注，与运行计算相比，DOM操作很慢。尽量减少DOM操作并更新现有组件，然后重新创建元素(虽然，我不确定您的应用程序在这方面如何工作，如果它完全放弃以前的板)

相关文章：