在react-devtools中，“ highlightUpdates”选项的各种突出显示颜色是什么意思

Question

我一直在使用react-devtools来检测任何不必要的组件更新，但是我不确定我是否完全理解它是如何工作的。

我可以识别出通过添加的边框进行了更新的各种组件，这些组件表明它们已经进行了更新，但是我不确定这些边框的各种颜色是什么意思（到目前为止，我已经看到了青色和浅绿色）。

Answer 1

我也不熟悉，但是我将遍历代码！:)

这是呈现“突出显示更新”切换的组件。它调用changeTraceUpdatesmain中Store的方法，该方法通过“桥”发送消息以激活TraceUpdatesBackendManager。仔细查看该文件，我们看到几个类，它们的名称类似于“ presenter”。我认为其中之一就是真正划定了边界。特别地，TraceUpdatesWebNodePresenter看起来很相关，因为它定义了的数组COLORS。看起来这些颜色是根据“命中”属性选择的，快速搜索建议由TraceUpdatesAbstractNodePresenter– 设置该属性，并且每次“展示”元素时都会增加这些颜色。

然后，在两行之间阅读时，我认为这意味着渲染频率较低的组件将用“冷”颜色（蓝色）勾勒出轮廓，而渲染频率较高的组件将用“热”颜色（红色）勾勒出来。