DevTools v4 版本的重大更新的确让平时不是特别关注调试工具的本人诧异了下，由于最近在关注一个长列表性能的评估，故仔细研读了这一版本的更新日志。

  1. 性能提升

    新版本相比旧版本是一个完全的重写。

    旧版本工具中一旦组件更新， UI 渲染会接收到 backend 发送的全量变化数据，导致前端需要大量的 JSON 序列化计算，新版本只接收最小的渲染组件树所需要的信息，如果必要，UI 部分可向 backend 请求数据。

    另外还优化了渲染不必要节点的问题，特别是针对 react-window 这样的局部渲染组件。

  2. Component stacks

  3. 支持组件过滤

  4. 移除横向滚动条

  5. 移除 inline 属性

  6. 增加 renderby 列表

  7. 增加 Owners tree

  8. hooks 支持的增强

  9. 搜索交互增强

  10. 增加 HOC badge 显示

  11. 页面刷新时保留之前选择节点

  12. Suspence 支持切换状态

  13. 性能分析支持首次加载渲染分析

  14. 支持导入导出分析日志

  15. “Why did this render?”

  16. 组件渲染时间列表

技术细节

Overview 里讲述了：

  • React Commit 携带的数据格式，操作 id、fiber id、string table 等。
  • 调试工具前端存储的数据格式。
  • 审查元素时前端才会去拉取所需信息：包括轮询策略、嵌套组件数据策略。
  • 新的性能分析工具
    • 降低分析时 CPU 负载
    • 前端与后台的数据通信

分析功能使用指南见该文