React/Redux 中的生命游戏，有助于提高性能 [英] Game of Life in React/Redux, help in increasing performance
问题描述
我正在使用 react/redux/javascript 开发 The Game of Life 的一个版本，而我正在使用它，但性能却很糟糕.
I am working on a version of The Game of Life in react/redux/javascript, whilst i have it working the performance is horrible.
目前，我每时每刻都在更新每个单元格的状态(用户可更改 250,500,750 毫秒).为此，我正在遍历代表每个单元格的对象数组.每个对象中都有一个名为 status 的参数，它可以是一个整数，1 代表活着，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/then 流程运行该数字来决定该单元格的新状态.
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.
我认为通过分析应用程序(我不是很清楚/擅长)，计算所有值的过程会减慢速度，但我可能是错的，它可能是 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.
感谢任何帮助/帮助！
推荐答案
所以最终使用 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屋！
