React / Redux中的生命游戏，有助于提高性能

Question

我正在使用react / redux / javascript中的生命游戏版本，而我的工作表现非常糟糕。

Here is a link to the running game Here's the source on githhub

目前，我在每个小时（用户可更改250,500,750ms）更新每个小区的状态。为此，我循环遍历代表每个单元格的对象数组。在每个对象中有一个名为status的参数，对于alive，该参数可以是1的整数，对于dead，可以是0的整数。

然后我拉出三排三个单元格，对于相关单元格周围的上面的中间和底部行，我然后将这些值相加（不包括单元格本身在中心）。

然后，我通过if / then流程运行该数字，以确定该单元格的新状态。

然后对应用程序中的每个单元重复此过程。完成后，使用redux调度每个单元的新状态，并根据需要更新组件。

在实际视图中，每个单元格都是一个反应组件，它从作为网格的容器接收它作为道具的状态。我已经设置了shoulComponentRender（）来仅在生命状态发生变化时重新渲染单元格。

我认为从分析应用程序（我不是很清楚/擅长），它是计算所有值减慢速度的过程，但我可能是错的，它可能是React组件引起了这个问题。

感谢任何帮助/帮助！

Answer 1

我认为这可能是个问题。通过剖析我们看到：

你有规律的间隔工作，每个工作约85毫秒非常不正常。向下看调用堆栈，有一个triggerTimer和随后的startTimer函数调用。

查看以下内容的源代码： https://github.com/gazzer82/fcc-game-of-life/blob/a4a000a6cafa5877a4a15e59cec5184076905cc4/src/containers/lower_buttons.jsx#L12。

您需要在条件中从startTimer返回。否则triggerTimer和startTimer会一次又一次地快速呼叫，每次都会产生新的超时。

在

  startTimer(){
    var that = this;
    if(this.props.controls.game === 'running'){
      this.props.stepState();
    }
    setTimeout(() => this.triggerTimer(), this.props.controls.speed);
  }

  triggerTimer(){
    this.startTimer();
  }

在

startTimer(){
  var that = this;
  if(this.props.controls.game === 'running'){
    this.props.stepState();
    // Return here
    return;
  }
  setTimeout(() => this.triggerTimer(), this.props.controls.speed);
}

triggerTimer(){
  this.startTimer();
}

Answer 2

所以最终使用DOM和html组件从未将性能提升到令人满意的水平。所以我重新编写了网格代码，使用HTM5 Canvas渲染所有单元格，性能不再是问题，事实上它现在在iPhone上呈现得很开心。