V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sillydaddy
V2EX  ›  React

遇到了 React 性能的一点问题,求调试思路

  •  
  •   sillydaddy · 2022-11-02 12:54:26 +08:00 · 1780 次点击
    这是一个创建于 788 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现状:同一个项目,用了 ant design 组件,在更新了 package.json 的依赖包之后(主要是 babel 从 6 更新到 7),再次编译出来的 html+bundle.js 跑起来比以前慢。项目的源码都是一样的,只是 node_modules 里面的库版本不一样。不仅性能有差异,compile 出来的 bundle.js 大小也有较大差别。

    调试:使用 react devtools 调试了一下,发现好像是 antd 的 table ,在慢的版本里,在数据没有变化的时候,也会重新渲染,而快的版本里就没有。 观察了一下 devtools 里面这两个版本的 React Components 树,没有发现什么大的差别。但慢的版本里面会有插入<Sentinel>这样的组件。

    疑问:怎么用 react devtools 调试这种重新渲染的问题呢?感觉不知道从哪里入手了。devtools 的 profiler 的火焰图虽然大概知道什么意思,两个版本的火焰图也明显有差别,但不知道怎么用它来调试,找到真正的问题所在。

    不懂这块的调试和 profile 是一个很大的短板。希望大家能指点一二,先谢过了。

    2 条回复    2022-11-02 21:32:12 +08:00
    maichael
        1
    maichael  
       2022-11-02 13:15:49 +08:00
    sillydaddy
        2
    sillydaddy  
    OP
       2022-11-02 21:32:12 +08:00
    @maichael
    谢谢。表面的问题找到了,是我对 package 包的管理有点混乱,package 里写的版本号与 node_modules 里的不一致。
    确实是 antd 的版本导致的性能差异。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1116 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 18:02 · PVG 02:02 · LAX 10:02 · JFK 13:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.