使用 React 开发者工具分析性能
介绍
分析 React 应用的性能可能是一个困难且耗时的过程。通过安装 React 开发人员工具，您可以记录和查询应用中各个组件的性能，并使此过程变得更加容易。
本指南将基于 React Web 应用，但开发人员工具也可以与 React Native 应用一起使用。以下示例中使用的应用在此处。
安装
首先要做的是安装开发者工具。具体安装方法取决于您用来运行应用的浏览器。对于 Chrome 和 Firefox，开发者工具以浏览器扩展程序的形式提供，可在相应的扩展程序商店中找到。如果使用其他浏览器，可以从此npm 包中将开发者工具作为独立应用安装。
在独立应用或浏览器中安装开发者工具后，将有两个新选项卡可用：组件和 Profiler。本指南将使用 Profiler 选项卡。
Profiler 选项卡
这是显示配置文件记录期间发生的每个提交的图表示例：
将鼠标悬停在提交上以获取有关其持续时间和记录发生时间点的信息，然后选择一个提交以在其他图表中查看它。
火焰图
这是示例应用程序中提交的火焰图：
图中的每个条形代表一个 React 组件，每个条形的宽度代表渲染该组件及其子组件所用的时间。条形也采用颜色编码，以便一目了然地显示哪些组件渲染时间最长，但实际持续时间可以在条形上看到（如果有文本空间）或通过将鼠标悬停在条形上来查看。
在上图中，您可以看到AppContextProvider的渲染时间最长，总共耗时 8.7 毫秒。但是，其中只有 1.8 毫秒是由 AppContextProvider本身占用的，而其余 6.9 毫秒则由其子组件渲染。如果您随后转到其唯一子组件Context.Provider组件，则可以看到其渲染耗时 0.4 毫秒，其余 6.9 毫秒由其子组件占用，依此类推。
随着图表向下移动，组件会变得越来越小，越来越难看到。选择一个组件会将该组件扩展至图表的整个宽度，使其更容易看到。
排名表
排名图表将提交中的每个组件显示为一个条形图，但这次它们按渲染持续时间排序。这是与上面的火焰图相同的提交的排名图表：
此图表仅处理组件本身所花费的时间，并未显示子组件渲染所花费的时间。如果您遇到由单个组件引起的性能问题，则使用此图表应该很容易识别。
探查器设置
开发者工具设置菜单中的Profiler选项卡上有两个选项：
通常，组件会在我们意想不到的情况下被渲染，而调试这种情况发生的原因可能非常困难且耗时。为了解决这个问题，React 开发人员工具可以在记录配置文件时记录每个组件被渲染的原因。选中记录分析时每个组件被渲染的原因复选框以使用此功能。如果选中此功能，当从右侧面板中的任一图表中选择一个组件时，将显示该组件被渲染的原因。
在分析应用程序时，您有时会生成大量提交，并且通常只关注那些花费较长时间的提交。为了减少 Profiler 选项卡中的混乱，您可以设置“隐藏以下提交”设置，这样只会显示花费时间超过指定毫秒数的提交。
分析初始渲染
查找性能问题
示例应用包含一个性能问题。虽然这个问题非常牵强，但它可以用来展示如何在应用中查找问题。
在示例应用中，单击窗口右侧的“显示计数”按钮时，在计数出现并且按钮标签更改为“隐藏计数”之前会有明显的延迟。为了尝试找出这种延迟的原因，您可以记录用户多次切换“显示计数”和“隐藏计数”按钮的个人资料。这是显示和隐藏三次产生的提交图表：
您可以看到提交 1、3 和 5 显示的条形明显高于其他提交。这是可以预料到的，因为延迟发生在显示而不是隐藏上。选择其中任何一个提交都会显示火焰图和排名图表，如下所示：
您首先看到的是，树中NumberSelector上方的所有组件都显示灰色背景，因为它们未在提交中呈现；这是我们所期望的，因为该组件的所有状态和事件处理都是在本地完成的。
您可能很快就会发现，该组件包含一个函数getCountToShow() ，每次在将showingCount状态设置为 true 的情况下呈现组件时都会调用该函数。如下所示：
const getCountToShow = () => {
pointlessDelay();
return changedCount;
};
解决此性能问题的一个好尝试可能是删除对pointlessDelay的调用，然后重新记录配置文件并查看从用户的角度和分析器图表来看滞后是否消失。
结论
本指南介绍了一些可用于分析 React 应用并帮助识别性能问题的工具。分析器中还有一个图表：交互图表。它使用了一个实验性的 API，可能会发生变化，可能需要一个单独的指南来介绍该功能。
本指南中使用的示例应用程序的代码可以在这里找到。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~