React: Devtools V4：亮点更新在哪里？

同样的问题在这里。 亮点更新已经消失。
我想知道现在是否必须使用 Profiler 来跟踪更新？

https://www.reddit.com/r/reactjs/comments/cqx554/introducing_the_new_react_devtools/ex1r9nb/

诚实的回答是我们没有足够的时间来实现它，并且没有认为它足够重要以阻止所有其他功能的发布。

但是，我们不确定是否会重新添加它有更深层次的原因。 它助长了错误的想法，即重新渲染本身是不好的（如果它们便宜，则不会）。 所以人们花时间优化无用的东西而忽略了实际的性能问题。

新的 DevTools 包含一个 Profiler，可以帮助您找到代码中的实际性能问题。 我理解对寻找额外渲染的超轻量级方式的渴望——也许我们会添加它——但我们首先需要更多地考虑它应该如何工作。

编辑以添加内联注释

之前的一些相关讨论https://github.com/bvaughn/react-devtools-experimental/issues/244

高亮更新非常有用，不是为了解决性能问题（新的 Profiler 在这方面做得更好），而是发现令人惊讶的渲染。 它为我们节省了无数次，尤其是在使用 Context 时，其中一个更改可能会导致应用程序的其他部分重新呈现。 在 Profiler 上工作时，您往往只关注树的一部分，因此很容易错过回归。

我理解@gaearon对给出错误想法的担忧，那么如何：

1.根据渲染持续时间选择轮廓颜色

便宜的渲染应该是绿色，昂贵的渲染应该是黄色或红色。 或者只使用 Profiler 使用的完全相同的颜色。

2. 改变轮廓淡入淡出速度

轮廓淡入淡出动画应与渲染持续时间相关。 快速渲染应该立即褪色，慢速渲染应该更慢地褪色。

3.区分重绘区域

我有时将Highlight Updates与 Chrome 的Paint Flashing 。 这使得导致重绘的渲染与没有 DOM 效果的渲染不同。 我认为 DevTools 应该内置类似的功能。

• 没有重绘的昂贵渲染应该是性能优化的主要目标。
• 重绘的渲染显然是在做一些需要完成的工作。
• 导致没有重绘的快速渲染可以忽略。

甚至可能有一个只闪烁上述第一个的设置（具有一些可配置的阈值）。

由于以下因素，识别“便宜”或“快速”渲染并不像看起来那么简单：

• 开发构建比生产构建慢得多。
• 开发人员笔记本电脑通常比最终用户笔记本电脑快得多。

Profiler 的好处在于它报告相对速度，让您可以专注于任何给定会话中应用程序最慢的部分。 （你可以决定什么时候最慢的部分足够快。）但这只能在回顾中完成。

它还为您提供提交的静态快照，以及哪些道具/状态发生了变化，让您不仅可以看到特定组件渲染的频率（是否超出您的预期？），而且还特别_为什么_重新渲染，以及其他什么用它重新渲染。

我认为我们很有可能会考虑将某种更新闪烁机制添加回 DevTools 作为 Profiler 的一部分。 也许只有在分析处于活动状态时它才会闪烁（就像以前一样）？ 也许它会在分析停止后在分析器中选择新提交时刷新重新渲染的每个组件？ （我有点喜欢这个想法，因为如果你错过了什么，它可以让你“重播”。）我们需要尝试一下，看看什么最有效。

我经常使用这个特性来确保只渲染应该渲染的组件。 我有一个应用程序，多次使用不同的 id 渲染相同的组件，我喜欢确保只有需要重新渲染的组件在渲染，而不是所有组件。 我看不到使用新探查器检查这一点的方法。

我没有看到用新的分析器检查这个的方法

你尝试过什么？ 分析器应该清楚地显示是一个孩子正在重新渲染还是许多孩子正在重新渲染。

我经常使用“突出显示更新”。 这是我使用最多的开发工具的功能。 只是看看更新了什么，而不是多久更新一次。 当然，您可以使用分析器来执行此操作，但这比具有快速视觉指示要麻烦得多。

对我来说，“突出显示更新”是“杀手级功能”......

我们听到了你的声音 :-) 我认为仅仅说“我用过这个”的进一步评论不会对这个线程有很大帮​​助，因为它的价值。 我们知道有人在使用此功能，并且正在考虑将其恢复的正确方法。 感谢反馈！

这个选项是我日常工作过程中的一个重要组成部分，可以立即指示重新渲染问题。 所以我真的很高兴，如果你能尽快把这个很棒的功能带回来。

+1 恢复此功能的某些版本，该版本可以快速查看重新渲染的高级视图（即使对于完全正常的重新渲染，例如我们更新 Context 时）。

+1 关于带回来

所以我真的很高兴，如果你能尽快把这个很棒的功能带回来。

如上要求：

我认为仅仅说“我用过这个”的进一步评论不会有很大帮助

更明确地重新表述：

我们听到了！

有很多人订阅了这个存储库。 我们不想每隔几个小时用相同的评论向他们发送垃圾邮件。 此外，我们个人使用 GitHub 通知。 如果这个帖子每天都被“+1”撞到，我们最终将不得不取消订阅以减少噪音。 这可能与您的意图相反。

在发表评论之前，请确保您添加了之前未曾提及的内容。 如果您看到与您想写的内容类似的评论，只需对其添加 👍 反应即可。

感谢您的理解。
我们感谢您的反馈，但 👍 足以帮助确定任务的优先级。

你正在添加一些以前没有说过的东西。

我想问一下，有没有办法安装以前版本的扩展？ 实际上，更新打破了流程，我曾经这样做过。 不幸的是，Chrome 扩展市场不允许您安装以前的版本，如“npm”。 你有编译扩展的链接吗？ 谢谢你。
_（我尝试安装独立版本，但来自 v3 存储库的此链接已损坏，指向 Crome 扩展的链接会指向最新版本）_

新的 DevTools 包含一个 Profiler，可以帮助您找到代码中的实际性能问题。

这是一个答案，为什么新扩展打破了我的流程。 Profiler 鼓励您按按钮开始，然后结束分析，但这不是即时的。 使用更新荧光笔，您无需额外移动即可查看所有内容。 它还以非常直观的方式向您显示实际更新以及实际触发的内容。

这让我想起了 Chrome DevTools 自己的性能监视器，它也曾经是实时更新的，然后有一天迁移到了 press-to-record 。 由于复杂性和对性能的影响，这一举动可能是有道理的，但关键是它增加了巨大的摩擦（正如@Carduelis指出的那样，不按开始/停止按钮要容易得多）。 它给OODA 循环丢了一把扳手，无疑会影响用户使用此功能的频率，进而影响应用程序本身的质量。

不要误会这一点 --- 新的性能监视器很酷并且在您需要深入挖掘时有它的用途，但它不能简单地替换像旧更新突出显示这样的快速和肮脏的可视化。

我想问一下，有没有办法安装以前版本的扩展？

@Carduelis上一版https ://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-旧版本返回

我绕了一圈，试图按照上面的说明在 Chrome 中安装 v3，但无法让独立的分析器突出显示更改。 所以我做了详细的分步说明，如果你只是想让它工作并重新优化你的组件：

安装 React Dev Tools V3（分步说明） ：
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

如果我可能会咆哮一下，虽然在技术层面上它可能看起来像“深入分析工具”>“一个愚蠢的突出显示功能”，我们​​都只是人类，我们从简单的视觉线索中快速收集了大量信息，所以在某些方面，突出显示功能非常重要，正是因为它非常易于使用。 对我来说，这就是我 90% 的时间都打开 React Dev Tools 的原因。

如果我可能会咆哮一下，虽然在技术层面上它可能看起来像“深入分析工具”>“一个愚蠢的突出显示功能”，我们​​都只是人类，我们从简单的视觉线索中快速收集了大量信息，所以在某些方面，突出显示功能非常重要，正是因为它非常易于使用。

我不认为 Dan 或我争论过它“更容易使用”，只是它可能会鼓励人们花时间“修复”没有“损坏”的东西（也就是优化不慢的东西） . 我们之前已经看到过这种模式，例如由于担心“性能”成本而广泛避免内联函数。 用于解决非问题的能量是指没有用于解决其他可能更重要的事情的能量。

正如我们上面所说的，我认为我们很有可能将某种更新闪烁机制添加回 DevTools 作为 Profiler 的一部分。

实际上，这不是我盘子上最优先的事情，所以我会要求耐心而不是重复这次谈话。 我们听到并承认此功能很重要。 我们将尝试权衡便利性与上述其他考虑因素，并提出比我们目前拥有的更多的东西。

关于过度优化，我可以证明视觉渲染突出显示可以鼓励这一点。 因此，我想在这里为讨论添加一些内容。

对于那些错过该功能的人，您可能会发现https://github.com/welldone-software/why-did-you-render 提供更多信息。

在实现此功能时，这可能是需要考虑的事情。 默认情况下，WhyDidYouRender 会进行深度值比较，并且仅在重新渲染之间实际没有发生变化时才报告。 在视觉渲染高光上进行相同的过滤会很棒。 这将指导更深思熟虑的优化（另外，这是分析器没有提供的区别）。

从理论上讲，应该可以在不考虑性能的情况下重新渲染整个应用程序，因此在各处添加 SCU 以避免看到渲染突出显示是一种适得其反的路径。

我仍然发现重新渲染突出显示对于演示 React 是如何工作的很有用。

默认情况下，WhyDidYouRender 会进行深度值比较，并且仅在重新渲染之间实际没有发生变化时才报告。

对于实际存在性能问题的应用程序来说，这听起来非常慢。 任何类型的深入比较肯定不是我们想要一直做的事情。 当您打开它（选择使用较慢的性能）时，为什么不直接启动 Profiler？

这将指导更深思熟虑的优化（另外，这是分析器没有提供的区别）。

Profiler 确实提供了以下版本：

如果您看到重新渲染的组件，但没有任何更改的 props/state/hooks，那么我认为这就是您所描述的。

@bvaughn好吧，您通常一次只打开单个组件的深度比较。 所以我同意默认情况下您不会为所有组件打开它。 也许您右键单击该绿色条并选择“突出显示渲染更新”。
这是非常巧妙和超级有用的，但它是你必须挖掘的东西。

@bvaughn我喜欢“为什么要渲染？” 功能（在此期间重新考虑Highlight Updates ），但是在阅读了所有可用文档并浏览了您的 youtube 教程之后，我仍然不确定如何在某些情况下解释它：

下划线的含义不直观：

为什么会这样渲染？

• 道具更改：(__)

我只使用 hooks api，但仍然不确定其含义：

为什么会这样渲染？

• 挂钩已更改

除了列出实际props / state发生变化的明显案例之外，是否有可能对这些案例以及我尚未遇到的其他案例有一个或两个解释？

下划线的含义不直观：

看起来您的应用程序中的某些内容正在传递名为__道具，并且该道具在提交之间发生变化 😄

我只使用hooks api，但仍然不确定含义

请参阅#16477

你好

我经常使用突出显示更新。 我正在开发一个经常令人耳目一新的应用程序，未来对我的日常工作至关重要。

我得到了@bvaughn提出的解决方案。 它非常有用，但我无法将其应用于刷新率的场景。 我需要一个快速指示而不是分析工具，顺便说一句，它看起来很棒。

你还要背这个实现吗？？ 如果不是，我怎么能降级我的 React Dev Tools，因为没有它我根本无法开发。

你还要背这个实现吗？？ 如果不是，我怎么能降级我的 React Dev Tools，因为没有它我根本无法开发。

@oztune 已经回答了。

怎么找回旧版本？
https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the-old-version-back

我要旧版本请回来。 新功能中丢失了太多功能，而且几乎无济于事

我要旧版本请回来。 新功能中丢失了太多功能，而且几乎无济于事

这是恢复旧版本的方法，对我有用：
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

嗨@einarq实际上我很想在新版本中缺少功能。 我看到了很多不错的新东西，但一些旧的东西很重要，我不明白它被删除的方式。 现在为了检查重新渲染，我在渲染功能中放置了一个控制台日志，以发现我是否减少了重新渲染的数量。 这并不理想，但它有效。 以前的版本使这变得非常简单和有用，因为它还向我展示了我可以发现的其他不需要的重新渲染。 现在，这只是痛苦。

请把那些缺失的功能放回新版本。

用我的话来说，新版本意味着你有：重新设计和改进旧版本和添加新的未来。没有删除和添加与前一个不同的新功能。

还有为什么我现在不能改变状态值？？

道具布尔值不再是复选框了？？ 那太酷了。 又不见了。

现在状态不能改变，道具我必须输入假/真，而不是点击并查看组件对此有何反应。

超级烦。

嗨@PMustard ，

我不研究这个，如果你不喜欢新版本，我只是建议一种潜在的方法来恢复旧版本的开发工具。 它对我有用。

我敢肯定，如果您为他们创建一些单独的问题，开发工具的团队（我猜主要是 Brian Vaughn？）会考虑您的担忧。

并且不要忘记表示赞赏。 我们免费获得这些工具:)
仅提供建设性反馈。

问候，

埃纳尔

如果您迫切需要此功能，可以使用旧版本作为解决方法： https: //reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the -旧版本返回。 我还鼓励您尝试使用 Profiler。 尽管运行起来需要更多的努力，但它会告诉您哪些重新渲染很重要，哪些不重要。 仅计算渲染数量通常会分散实际性能问题的注意力。

我们明白，有一种轻松的方式来发现意外的重新渲染是很有价值的。 我们已经在https://github.com/facebook/react/issues/16437#issuecomment -523629000 中解释说这是我们关注的问题，并且更多的评论说“我需要这个”没有帮助。 由于这个线程仍然继续收集“我需要这个”评论，我将锁定它以减少通知泛滥。 请放心，您的声音已被听到。

我已经在新的 DevTools (#16989) 中实现了这个功能，但有以下注意事项：

• 目前它只在浏览器扩展（和react-devtools-inline NPM 包）中启用，所以它只支持 React DOM。
• 它没有为旧版渲染器 (v15) 实现，但如果有人想提交后续 PR，可以添加它。

现在关闭这个问题 #16989 登陆。 今天可能会发布具有新功能的 4.2。