sillydaddy
5.47D
4.88D
V2EX  ›  React

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

  •  
  •   sillydaddy · Nov 2, 2022 · 2490 views
    This topic created in 1311 days ago, the information mentioned may be changed or developed.

    现状:同一个项目,用了 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 replies    2022-11-02 21:32:12 +08:00
    maichael
        1
    maichael  
       Nov 2, 2022
    sillydaddy
        2
    sillydaddy  
    OP
       Nov 2, 2022
    @maichael
    谢谢。表面的问题找到了,是我对 package 包的管理有点混乱,package 里写的版本号与 node_modules 里的不一致。
    确实是 antd 的版本导致的性能差异。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2967 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 04:16 · PVG 12:16 · LAX 21:16 · JFK 00:16
    ♥ Do have faith in what you're doing.