使用 React + Redux 实现一个兰顿蚂蚁演示程序

[nzbin]

兰顿蚂蚁是一个非常经典的元胞自动机。详情可以查看 维基百科

这个小程序也是练习 React 和 Redux 比较好的例子。但是采用 DOM 元素模拟这个程序还是比较吃力，100X100 的网格在 Chrome 上还勉强吃得消，其它浏览器就非常卡顿了。程序实现参考了 生命游戏 这个项目。

项目地址 https://github.com/nzbin/langton-ant-redux

[Exin]

这个蚂蚁还是第一次听说，以前只知道生命游戏，有点意思

简单看了一下，这个每一步只有一个格子发生变化吧，按照 React 采用 vDOM 的机制，按理说应该只有一个 DOM 元素需要更新
而且据我观察变化的只是颜色，因此都不需要浏览器进行重排

所以这锅不能怪 DOM/浏览器 喔

[robotdiy]

太厉害了，感谢分享。

[nzbin]

@Exin DOM 数量过多还是会影响性能的，浏览器之间的差距确实比较明显，另外我的电脑也比较老了

[CasualYours]

canvas 性能感觉会好点

[Exin]

@nzbin 话是没错，但具体考虑楼主的 demo，才 10000 个<li>节点，谈不上过多吧
我想说的是这个项目有很大的优化空间
建议用 react-devtools 看一下每次 render 做了多少不必要的行为

[nzbin]

@CasualYours canvas 比较流畅，四五个蚂蚁也没问题