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

时间:2018-08-02 07:38:57

标签: react-devtools

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

我可以识别出通过添加的边框进行了更新的各种组件,这些组件指示它们已更新,但是我不确定这些边框的各种颜色是什么意思(到目前为止,我已经看到了青色和浅绿色)。< / p>

1 个答案:

答案 0 :(得分:4)

我也不熟悉,但是我将遍历代码! :)

This is the component that renders the "Highlight Updates" toggle.它调用changeTraceUpdates method in the main Store,后者通过“网桥”向activate the TraceUpdatesBackendManager发送消息。仔细查看该文件,我们看到几个类,它们的名称类似于“ presenter”。我认为其中之一就是真正划定了边界。特别是TraceUpdatesWebNodePresenter looks related because it defines an array of COLORS。看起来这些颜色是根据“命中”属性选择的,快速搜索建议是set by TraceUpdatesAbstractNodePresenter– and gets incremented each time an element is "presented"

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