我正在用react / redux / javascript开发一个版本的《生命游戏》,而我的作品表现却很糟糕。
这是正在运行的游戏的链接这是 githhub上的源代码
此刻,我每时每刻(可由用户更改250,500,750ms)更新每个单元的状态。为此,我正在遍历代表每个单元格的对象数组。每个对象中都有一个名为status的参数,该参数可以是1的整数(表示活动)或0(整数)。
然后,我将三个单元格的三行拉进去,对于所讨论的单元格周围的上方和中间行,然后将这些值相加(不包括位于中心的单元格本身)。
然后,我通过if / then流运行该数字,以确定该单元格的新状态。
然后,对应用程序中的每个单元重复此过程。完成后,将使用redux分派每个单元的新状态,并根据需要更新组件。
在实际视图中,每个单元格都是一个反应组件,它从作为网格的容器中接收其状态作为支柱。我设置了shoulComponentRender()以仅在其生命状态更改时重新渲染该单元格。
我认为从对应用程序进行性能分析(我不太清楚/不擅长)来看,这是计算所有值的过程,这使事情变慢了,但是我可能是错的,并且可能是React组件导致了问题。
任何帮助/协助表示赞赏!
因此,使用DOM和html组件最终无法使性能达到令人满意的水平。因此,我重新编写了网格代码,以使用HTM5 Canvas渲染所有单元,并且性能不再是问题,实际上,现在它在iPhone上渲染起来非常愉快。