生命游戏中的表现问题（React.js + Redux）

Question

当我的生命游戏独立运行时，我遇到了一些问题。 为此，我尝试设置一个setInterval并触发每次有人点击Next时触发的功能。 但它给我带来了很多问题。

主要问题是，当我设置setInterval（（）=> this.handleChange（），100）时，游戏的移动速度非常慢，最终会在codepen中崩溃。

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上看这个问题 ，他似乎和我有同样的问题，但最后要解决它，他开始使用canvas。

我也想知道我的游戏性能是否低于我创建下一个主板的方式。 我只有两个板，实际的一个和下一个包含所有新机芯的板，当我最终填满这个新板时，我改变了触发动作的状态板。 或者问题是我在使用setInterval函数做错了。

在此先感谢，任何帮助将不胜感激。

Answer 1

您可以尝试解决以下两点：1）如果您的步长可能比您的间隔长，那么setInterval使用起来有点危险。 你会占用浏览器。 因此，在完成步骤后，使用setTimeout触发下一步。

2）作为旁注，与运行计算相比，DOM操作很慢。 尝试最小化DOM操作并更新现有组件然后重新创建元素（但是，我不确定您的应用程序在这方面如何工作，如果它完全丢弃前一个板）

Answer 2

要解决您的问题，您应该添加

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 s，值是标识。 这意味着如果你写相同的值，Redux会看到它是相同的。 Redux无法检查两个不同的对象是否具有完全相同的属性，因为它需要太长时间。

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

无论哪种方式都会使你的电路板快速， 只要只有有限的电路板实际上会改变 。 如果整个电路板闪烁，那么除了使用不同的技术，例如Canvas或React-Canvas之外，你无能为力。 DOM很慢。