react性能提升库_使用React Profiler提高性能

react性能提升库

With React, building high performance web applications became very easy because of the framework's re-rendering on the JavaScript virtual DOM, which helps it to quickly determine the changes needed when a user event is occurring. When writing complex application with React you will run into some performance issues, either because the application re-renders when it really doesn’t need to or because the states aren’t being handled properly, amongst other reasons.

使用React ，由于该框架在JavaScript虚拟DOM上重新呈现，因此构建高性能Web应用程序变得非常容易，这有助于它快速确定发生用户事件时所需的更改。 在使用React编写复杂的应用程序时，您会遇到一些性能问题，这可能是因为该应用程序在真正不需要时会重新渲染，或者是因为状态未得到正确处理等其他原因。

什么才算是高性能应用程序？ ( What exactly is regarded a high performance application? )

Performance is really important when dealing with a complex application or any application. In fact if your application doesn't cover 60 frames per second (fps) which would give it like 16.7ms per frame, it is more than likely underperforming with regards to the standards. When your app is slow, it obviously takes more time to carry out instructions in good time, leading to a poor user experience.

在处理复杂的应用程序或任何应用程序时，性能确实很重要。 实际上，如果您的应用程序不能覆盖每秒60帧（fps）的速度（每帧为16.7毫秒），那么就标准而言，它的表现可能很差。 当您的应用运行缓慢时，很显然，需要花费更多的时间来及时执行指令，从而导致糟糕的用户体验。

Note: Optimizations are possible without React, true! However, as you develop more complicated views, maintaining and comparing virtual DOMs can become confusing and cause underperformance. Fortunately, React provides some tools to detect where performance issues exist and a means for avoiding them.

注意：没有React，优化是可能的，真的！ 但是，随着您开发更复杂的视图，维护和比较虚拟DOM可能会造成混乱并导致性能下降。 幸运的是，React提供了一些工具来检测性能问题存在的地方以及避免这些问题的方法。

React Profiler ( React Profiler )

The concept of the react profiler is to collect timing information about components, the time rendered and committed in order to identify when each component actually rendered and at what speed. Basically to explain to you how fast or how slow your application is.

React探查器的概念是收集有关组件的时序信息 ，渲染和提交的时间，以识别每个组件实际渲染的时间和速度。 基本上向您解释您的应用程序有多快。

对React应用程序进行性能分析 ( Profiling a React Application )

To explain this process, I will be using a simple question and answer application, rendering on Mozilla Quantum browser, with the React Performance Devtool.

为了解释这个过程，我将使用一个简单的问答应用程序，通过React Performance Devtool在Mozilla Quantum浏览器上进行渲染。

The React Profiler environment is empty at first, you’d also notice a record button. click on it to start profiling.

首先，React Profiler环境是空的，您还会注意到一个记录按钮。 单击它开始分析。

Once you

click on the record button, the profiler automatically collects performance information each time your application renders. To end this, click on the stop button

单击记录按钮后 ，每次应用程序呈现时，探查器都会自动收集性能信息。 要结束此操作，请单击停止按钮

The dev tool provides a way for you to monitor the performance data .

开发工具为您提供了一种监视性能数据的方法。

绩效数据的形式 ( Forms of Performance Data )

React has two phases where it does work for our application:

React有两个阶段可以为我们的应用程序工作：

• Render: React determines what DOM changes need to be made by comparing render results with a previous render
  渲染 ：React通过将渲染结果与先前的渲染进行比较来确定需要进行哪些DOM更改
• Commit: React applies any changes that need to happen. Add/remove from the DOM and call lifecycle hooks like componentDidMount and componentDidUpdate
  提交 ：React应用需要进行的任何更改。 从DOM中添加/删除并调用生命周期挂钩，例如componentDidMount和componentDidUpdate

When profiling, we'll be looking closely at the commit phase to see where performance dips are.

进行性能分析时，我们将密切关注提交阶段，以了解性能下降的位置。

过滤提交 (Filtering commits)

The profiler runs for as long as you application renders, until you hit the stop button, you might have up to 30 commits depending on how many times your application renders. Say you want to know the commits that were faster than 500 milliseconds. The profiler offers a filtering option that can help you achieve this in these simple steps.

探查器在应用程序渲染期间一直运行，直到您按下“停止”按钮为止，根据应用程序渲染的次数，您最多可以进行30次提交。 假设您想知道快于500毫秒的提交。 探查器提供了一个筛选选项，可以通过以下简单步骤帮助您实现此目的。

步骤1：开启设定 (Step 1: Opening Settings)

Click on the settings icon.

单击设置图标。

步骤2：配置事件探查器 (Step 2: Configure the Profiler)

A drop down profiler setting shows, from where you can then 'Hide commits below" a specific value, then veiw the changes on the upper right.

下拉的探查器设置显示，然后可以从此处“在以下位置隐藏提交”特定值，然后检查右上方的更改。

浏览提交 ( Browsing commits )

Before we go further, have you ever wondered how react renders content? Basically it is made up of two phases, the render phase and the commit phase, the summary of how react renders is that it determines what changes need to be made by comparing the results from the user event and applies the changes in the commit phase.

在继续之前，您是否想过React如何渲染内容？ 基本上，它由渲染阶段和提交阶段两个阶段组成，对React渲染方式的总结是它通过比较用户事件的结果来确定需要进行哪些更改，并将更改应用于提交阶段。

The commit bar chart can be found in the far right, the currently selected commit is colored black, the color and height of each bar corresponds to how long that commit took to render.

提交条形图可以在最右边找到，当前选定的提交被涂成黑色，每个条形的颜色和高度对应于提交所花费的时间。

Note: When the commits are gray it means they weren’t rendered, this could be as a result of setState never being called in the component.

注意：当提交为灰色时，表示未渲染它们，这可能是由于setState从未在组件中调用的结果。

排行榜 ( Ranked Chart )

The ranked chart view of representing performance shows a React component in bar format. It is arranged in descending order, with the components that took the longest to render at the top. A component's rendering time also includes the time it took to render the children components.

表示性能的排名图表视图以条形格式显示React组件。 它以降序排列， 在顶部渲染所需时间最长的组件 。 组件的渲染时间还包括渲染子组件所花费的时间。

组成图 ( Component Chart )

When we want information on how many times a particular component rendered, we can use the React profiler's component chart feature which has bars that represent the time when the component rendered. The color and height of each bar shows how long the component took to render relative to other components in a particular commit. You can get here by simply double tapping the rank bars.

当需要有关特定组件渲染多少次的信息时，可以使用React Profiler的组件图表功能，该功能具有代表组件渲染时间的条形图。 每个条形的颜色和高度显示相对于特定提交中的其他组件而言，组件渲染所花费的时间。 您只需双击等级栏即可到达此处。

互动互动 ( Interactions )

React recently added another experimental API for tracing the cause of an update. "Interactions" traced with this API will also be shown in the profiler. You can also see which interactions were traced for a particular commit from the flame chart and ranked chart views.

React最近添加了另一个实验性API，用于跟踪更新原因。 使用此API跟踪的“交互”也将显示在事件探查器中。 您还可以从火焰图和排名图表视图中查看针对特定提交跟踪的交互。

火焰图 ( Flame Chart )

The flame chart view represents the state of your application for a particular commit. Each bar in the chart represents a React component. The size and color of the bar represents how long it took to render the component and its children.

火焰图视图表示特定提交的应用程序状态 。 图表中的每个条形图都代表一个React组件。 条形图的大小和颜色表示渲染组件及其子代所花费的时间。

• *width *of a bar represents how much time was spent when the component last rendered
  栏的宽度*表示上次渲染组件时花费了多少时间
• *color *represents how much time was spent as part of the current commit
  * color *表示在当前提交中花费了多少时间

常见问题 ( Common Problems )

When the following happens, don’t panic. Sometimes your app may have more than one root element, then you may see this error message

当发生以下情况时，不要惊慌。 有时您的应用程序可能具有多个根元素，那么您可能会看到此错误消息

• No profiling data has been recorded for the selected root
  尚未记录所选根的概要分析数据

What this simply means is that no performance data was recorded for the root you are currently on. In this case, try selecting a different root in that panel to view profiling information for that root

这仅表示没有记录您当前所在的根的性能数据。 在这种情况下，请尝试在该面板中选择其他根，以查看该根的性能分析信息。

• No timing data to display for the selected commit
  没有时序数据可显示所选提交

Sometimes a commit may be so fast that performance.now() doesn’t give DevTools any meaningful timing information.

有时，提交可能是如此之快，以至于performance.now()不会为DevTools提供任何有意义的计时信息。

React分析的未来 ( The future of React Profiling )

It will be fully compatible with the upcoming time slicing and suspense features. Which are features still being worked on by the good people at React .

它将与即将到来的时间分片和暂记功能完全兼容。 React的好人仍在开发哪些功能。

外部分析器 ( External profiler )

We can also run the react profiler in the application by using the following:

我们还可以使用以下命令在应用程序中运行react profiler：

import React, { Component, unstable_profiler as Profiler } from 'react';

const logProfiler = ({
  ProfilerId,
  Phase,
  ActualTime,
  StartTime,
  CommitTime,
  Interactions,
}) => {
  console.log({
    ProfilerId,
    Phase,
    ActualTime,
    Basetime, //time taken by react
    StartTime, //time at which render starts
    CommitTime,
    Interactions, // this is gotten from the rapping API
  });
}

If you want to wrap profiler external in your code you also have to indicate the root you want to profile as thus

如果要在代码中使用外部分析器，则还必须指明要分析的根

<Profiler id="image-grid" onRender={this.logProfiler} />

The onRender prop is calling the profiler option and logging out all the information on the log

onRender属性正在调用事件探查器选项，并注销日志中的所有信息

更多信息？ ( More information? )

The React blog recommends checking out this YouTube video by Brian Vaughn on the React profiler:

React博客建议在React Profiler上观看Brian Vaughn的以下YouTube视频：

Happy coding!

编码愉快！

翻译自: https://scotch.io/tutorials/use-the-react-profiler-for-performance

react性能提升库