V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
nzbin
V2EX  ›  分享创造

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

  •  
  •   nzbin ·
    nzbin · 2018-05-06 17:27:07 +08:00 · 3384 次点击
    这是一个创建于 2393 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    Langton's ant

    第 1 条附言  ·  2018-05-07 10:48:43 +08:00
    兰顿蚂蚁在大约 10000 步之后走出混沌,呈现循环轨迹
    6 条回复    2018-05-07 13:26:58 +08:00
    Exin
        1
    Exin  
       2018-05-06 18:35:54 +08:00 via iPhone
    这个蚂蚁还是第一次听说,以前只知道生命游戏,有点意思

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

    所以这锅不能怪 DOM/浏览器 喔
    robotdiy
        2
    robotdiy  
       2018-05-07 00:05:45 +08:00
    太厉害了,感谢分享。
    nzbin
        3
    nzbin  
    OP
       2018-05-07 10:44:24 +08:00
    @Exin DOM 数量过多还是会影响性能的,浏览器之间的差距确实比较明显,另外我的电脑也比较老了
    CasualYours
        4
    CasualYours  
       2018-05-07 11:04:31 +08:00
    canvas 性能感觉会好点
    Exin
        5
    Exin  
       2018-05-07 11:16:45 +08:00 via iPhone
    @nzbin 话是没错,但具体考虑楼主的 demo,才 10000 个<li>节点,谈不上过多吧
    我想说的是这个项目有很大的优化空间
    建议用 react-devtools 看一下每次 render 做了多少不必要的行为
    nzbin
        6
    nzbin  
    OP
       2018-05-07 13:26:58 +08:00
    @CasualYours canvas 比较流畅,四五个蚂蚁也没问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2832 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 13:31 · PVG 21:31 · LAX 05:31 · JFK 08:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.