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

Question

我正在使用 react/redux/javascript 开发 The Game of Life 的一个版本，当我使用它时性能很糟糕。

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

目前，我在每个滴答声(用户可更改的 250,500,750 毫秒)更新每个单元格的状态。为此，我循环遍历代表每个单元格的对象数组。每个对象中都有一个名为 status 的参数，它可以是一个整数，1 表示活着，0 表示死了。

然后我拉入三行，每行三个单元格，对于相关单元格周围的中间和底部行，我然后对这些值求和(不包括中心的单元格本身)。

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

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

在实际 View 中，每个单元格都是一个 react 组件，它从作为网格的容器接收它的状态作为 Prop 。我已将 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();
}