你不知道的React Developer Tools，20 分钟带你掌握 9 个 React 组件调试技巧( 三 ) _生活百科

当开启渲染高亮后，之后我们的每次操作，只要涉及到 render 的组件都会有一个颜色的框框标注出来，而渲染的维度涉及两个方面：

颜色，只有绿色或者黄色，绿色表示渲染次数很少，颜色越偏黄说明渲染越多。
框框持续时间，如果高亮迟迟不消失，也说明渲无效渲染持续非常久。

先了解这两点，至于如何排查无效渲染，我们另起一篇文章再说。
叁 ? 总那么到这里，我们基本介绍了 React Developer Tools 你可能会用到的所有场景以及技巧，我相信在掌握这些小技巧之后对于你未来的开发会有极大的帮助，而关于另一个工具Profiler 在性能优化篇我们再单独探讨，敬请期待。