React / Redux中的生命游戏，有助于提高性能 [英] Game of Life in React/Redux, help in increasing performance
问题描述
我正在使用react / redux / javascript中的生命游戏版本，而我正在使用它的表现非常糟糕。
I am working on a version of The Game of Life in react/redux/javascript, whilst i have it working the performance is horrible.
目前，我在每一个tick（用户可更改250,500,750ms）更新每个单元的状态。为此，我循环遍历代表每个单元格的对象数组。在每个对象中都有一个名为status的参数，对于alive可以是1的整数，或者对于dead来说是0的整数。
At the moment, i am at every tick (250,500,750ms changeable by the user) updating the state of each cell. For that i am looping through an array of objects that represent each cell. Within each object is a parameter called status which can be an integer on 1 for alive or 0 for dead.
然后我拉入三行三个单元格，在相关单元格周围的中间和底部行上方，然后我将这些值相加（不包括单元格本身在中心）。
I am then pulling in three rows of three cells, for the above middle and bottom rows around the cell in question, i then sum those values (excluding the cell itself in the centre).
然后我通过if /运行该数字然后流动以决定该单元格的新状态。
I then run that number through an if/then flow to decide the new state of that cell.
然后对应用程序中的每个单元格重复此过程。一旦完成，每个单元格的新状态将使用redux进行调度，组件将根据需要进行更新。
This process then repeats for every single cell in the application. Once it's done the new state of each cell is dispatched using redux and the components update as needed.
在实际视图中，每个单元格都是一个接收它的状态的反应组件作为网格的容器的支柱。我已经设置了shoulComponentRender（）来仅在生命状态发生变化时重新渲染单元格。
In the actual view, each cell is a react component that receives it's state as a prop from the container which is the grid. I have setup shoulComponentRender() to only re-render the cell when it's life status changes.
我认为从分析应用程序（我不是很清楚/好） at）它是计算所有减慢速度的值的过程，但我可能是错的，它可能是造成问题的React组件。
I think from profiling the app (which i'm not very clear/good at) that it is the process of calculating all the values that is slowing things down, but i could be wrong and it could be the React components that are causing the issue.
任何帮助/帮助表示感谢！
Any help/assistance appreciated!
推荐答案
所以最终使用DOM和html组件从未将性能提升到令人满意的水平。所以我重新编写了网格代码，使用HTM5 Canvas渲染所有单元格，性能不再是问题，事实上它现在在iPhone上呈现得很开心。
So in the end never got the performance to a satisfactory level using the DOM and html components. So i re-wrote the grid code to render all the cells using HTM5 Canvas and the performance is no longer an issue, in fact it now renders quite happily on the iPhone.
这篇关于React / Redux中的生命游戏，有助于提高性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
