用途:当用户要求分析或优化缓慢的 React 组件时使用,目标是定位渲染热点、隔离昂贵更新并做针对性优化,且不改变 UI 行为。
主要能力:识别触发重渲染的原因(状态更新、props 频繁变化、effect);将高频变化的状态与重型子树隔离;稳定 props 与事件处理器并按收益进行 memo 化;减少昂贵计算、DOM 体积与列表长度;检查 key 稳定性与 effect 依赖数组;关注昂贵布局抖动或大型 Markdown/diff 渲染。
使用方式:先复现或描述卡顿;找出重渲染触发源;把计时/动画等高频状态移入子组件;用 memo 包裹 props 稳定的叶子行;用 useCallback/useMemo 稳定处理器与派生值;避免在 render 中做派生计算;对长列表做窗口化/虚拟化;确保 key 稳定。验证时打开 React DevTools Profiler,录制交互,在 Flamegraph 中查看渲染超过约 16ms 的组件,并与优化前基线对比;一次只应用一项优化并重新录制比较。
适用场景:列表卡顿、频繁重渲染、昂贵渲染工作等 React UI 性能问题。
限制:资料未提供安装命令、收费、平台支持等具体信息;具体重构示例可参考 references/examples.md。