React / Redux中的生命游戲，有助於提高性能

Question

我正在使用react / redux / javascript中的生命游戲版本，雖然我有它的工作，性能是可怕的。

這是運行游戲的鏈接這里是 githhub上的源代碼

目前，我在每個滴答（用戶可更改250,500,750ms）更新每個單元的狀態。 為此，我循環遍歷代表每個單元格的對象數組。 在每個對象中有一個名為status的參數，對於alive，該參數可以是1的整數，對於dead，可以是0。

然后，我將三行三個單元格拉出來，對於所討論的單元格周圍的上面的中間和底部行，然后我將這些值相加（不包括中心的單元格本身）。

然后，我通過if / then流程運行該數字，以確定該單元格的新狀態。

然后對應用程序中的每個單元重復此過程。 完成后，使用redux調度每個單元的新狀態，並根據需要更新組件。

在實際視圖中，每個單元格是一個反應組件，它從作為網格的容器接收它作為道具的狀態。 我已經設置了shoulComponentRender（）來僅在生命狀態發生變化時重新渲染單元格。

我認為從分析應用程序（我不是很清楚/擅長），它是計算所有值減慢速度的過程，但我可能是錯的，它可能是導致問題。

任何幫助/幫助表示贊賞！

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上呈現得非常愉快。