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

IT技术 javascript reactjs redux
2021-05-03 21:14:51

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

这是正在运行的游戏的链接 这是 Githhub 上的源代码

目前，我每时每刻都在更新每个单元格的状态（用户可更改 250,500,750 毫秒）。为此，我正在遍历代表每个单元格的对象数组。在每个对象中都有一个名为 status 的参数，它可以是一个整数，1 代表活着，0 代表死。

然后我将三个单元格的三行拉入，对于有问题的单元格周围的上述中间和底部行，然后我将这些值相加（不包括中心的单元格本身）。

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

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

在实际视图中，每个单元格都是一个react组件，它从作为网格的容器接收它的状态作为props。我已设置 shoulComponentRender() 以仅在单元格的生命状态发生变化时重新渲染单元格。

我认为通过分析应用程序（我不是很清楚/擅长），它是计算所有值的过程使事情变慢，但我可能是错的，它可能是 React 组件导致问题。

任何帮助/协助表示赞赏！

2个回答

我认为这可能是问题所在。通过分析我们看到：

在此处输入图片说明

你有规律的间歇性工作，每次大约需要 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();
}

所以最终使用 DOM 和 html 组件的性能一直没有达到令人满意的水平。所以我重新编写了网格代码，使用 HTM5 Canvas 渲染所有单元格，性能不再是问题，事实上它现在在 iPhone 上渲染得非常愉快。

其它你可能感兴趣的问题
上一篇视网膜创造最佳旋转 下一篇3D 打印机是否可以有效地打印详细的虹膜以绕过虹膜识别系统？