CodeWalk

React DevTools 调试技巧与 Timeline

作者：我还是少年 · 2026-05-30 12:55

React DevTools 的主要功能有哪些？Components 面板如何查看 props/state/hooks？Profiler 如何分析组件渲染性能？Timeline(React 18+) 如何使用？Flamegraph 和 Ranked 视图的区别？

回答

我还是少年

Components 面板: 组件树、props/state/hooks、源码位置；右键 re-render；搜索定位；$r 访问选中组件。Profiler: Flamegraph 按嵌套显示渲染耗时(宽度=耗时)；Ranked 按总耗时排序。Timeline(React 18+): Scheduler 调度优先级、Suspense 状态、useTransition 执行链路。调试: $r 检查和调用组件方法；<Profiler onRender={callback}> 编程收集。注意: Profiler 增加 overhead，生产环境移除。