【译】React性能分析器：逐步指南以测量应用性能

React性能分析器：逐步指南以测量应用性能

原文地址：deadsimplechat.com/blog/react-...

随着react应用程序变得越来越复杂，测量应用程序性能成为开发人员的一项必要任务。

React提供了一个内置的性能监控工具，称为React profiler

React profiler允许开发人员测量应用程序中各个组件的性能

分析器测量呈现组件所需的时间，并提供有关组件呈现行为的关键见解，包括组件呈现的频率和呈现组件的成本

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

<分析器>

profiler让你以编程的方式测量React Tree的渲染性能。

ini 复制代码

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

渲染性能测量

要测量react组件的渲染性能，只需将其封装在组件中

像这样

xml 复制代码

<App>
  <Profiler id="navbar" onRender={onRender}>
    <Navbar />
  </Profiler>
  <PageContent />
</App>

它需要两个道具

onRenderfunction:每当树中的组件提交更新时，React都会调用这个函数
id: id为A的字符串

注意:分析器组件允许您以编程方式收集测量值。如果你正在寻找一个基于UI的分析器，react开发工具中的分析器选项卡将为你工作

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

onRender回调

onRender回调接收几个参数，这些参数提供有关组件呈现行为和资源利用的详细信息

javascript 复制代码

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // information regarding rendered components...
}

id:它是分析器的唯一标识符。Id是一个字符串属性，它可以让您识别刚刚提交的分析器树，或者如果您使用多个分析器，则可以识别该树的哪一部分已提交
阶段:安装、更新或嵌套更新。让你知道树是第一次安装还是由于道具状态或钩子的变化而重新渲染
actualDuration:为当前更新呈现及其子节点所花费的时间(以毫秒为单位)。理想情况下，这应该在第一次渲染后减少，并且如果特定道具发生变化，不需要重新渲染许多组件
baseDuration:重新呈现整个分析器子树所需的时间(以毫秒计)。它是通过添加树中每个组件最近的呈现持续时间来计算的。这是渲染的最坏情况
开始时间:指示react何时开始呈现组件当前更新的时间戳
endTime:指示react何时停止呈现组件最近更新的时间戳

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

度量应用程序的不同部分

可以在多个地方使用<Profiler>组件来度量应用程序的不同部分

xml 复制代码

<App>
  <Profiler id="navbar" onRender={onRender}>
    <Navbar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content />
  </Profiler>
</App>

您还可以嵌套<Profiler>组件

xml 复制代码

<App>
  <Profiler id="Navbar" onRender={onRender}>
    <Navbar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content>
      <Profiler id="Editor" onRender={onRender}>
        <Editor />
      </Profiler>
      <Preview />
    </Content>
  </Profiler>
</App>

虽然分析器是一个轻量级组件。它确实增加了一些CPU开销，应该在必要时使用。

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

例子

1. 数据表组件

考虑一个显示大量记录的数据表组件。每当获取新数据时，数据表就会更新，这可能会导致性能问题

让我们尝试使用分析器组件找到瓶颈并修复问题

javascript 复制代码

import { Profiler } from 'react';
import TableInfo from './TableInfo';

function App() {
  return (
    <Profiler id="TableInfo" onRender={onRenderCallback}>
      <DataTable />
    </Profiler>
  );
}

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  endTime,
) {
  console.log(`Profiler [${id}] - ${phase} - ${actualDuration} ms`);
}

将该组件封装在分析器组件中，并在回调时提供id和onRender函数
当表在屏幕上呈现时，onRenderfunction为您提供以下参数
id, phase, actualDuration, basedduration, startTime, endTime，
将总时间和相位记录到控制台，然后记录读数

像这样将分析器添加到子组件中

javascript 复制代码

import { Profiler } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      <Profiler id="ChildComponent" onRender={onRenderCallback}>
        <ChildComponent />
      </Profiler>
    </div>
  );
}

使用actualDuration、phase、startTime和endTime分析每个子组件的性能。

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

2. 用验证度量表单组件的性能

在这个例子中，我们有一个具有多个输入字段和表单验证的复杂表单。当对每个输入更改触发验证时，此表单可能存在性能问题

javascript 复制代码

import { Profiler } from 'react';
import ExpensiveForm from './ExpensiveForm';

function App() {
  return (
    <Profiler id="ExpensiveForm" onRender={onRenderCallback}>
      <ExpensiveForm />
    </Profiler>
  );
}

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime,
  interactions
) {
  console.log(`Profiler [${id}] - ${phase} - ${actualDuration} ms`);
}

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

3.无限滚动:使用分析器识别性能问题

我们有一个列表组件，它使用无限滚动功能显示数据

过度重新呈现数据可能会导致性能问题。我们将使用react分析器来调试这些问题

javascript 复制代码

import { Profiler } from 'react';
import InfiniteScrollList from './InfiniteScrollList';

function App() {
  return (
    <Profiler id="InfiniteScrollList" onRender={onRenderCallback}>
      <InfiniteScrollList />
    </Profiler>
  );
}

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime,
  interactions
) {
  console.log(`Profiler [${id}] - ${phase} - ${actualDuration} ms`);
}

让我们使用react分析器来分析性能数据。分析和调试InfiniteScrollList组件中异常长的列表再现

取消滚动事件:延迟滚动处理程序查找要显示的新项的速度

memorization: React.memo()可以用来防止不必要的重新呈现

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

4. 昂贵的计算:分析性能

让我们以一个进行昂贵计算的组件为例。也许它有一个大的数据集或者其他一些计算密集型的原因

我们希望分析组件并确定性能瓶颈

我们需要用id和onRenderCallback函数将昂贵的计算组件封装在Profiler组件中

javascript 复制代码

import { Profiler } from 'react';
import ExpensiveComputation from './ExpensiveComputation';

function App() {
  return (
    <Profiler id="ExpensiveComputation" onRender={onRenderCallback}>
      <ExpensiveComputation />
    </Profiler>
  );
}

实现onRenderCallback函数来返回分析器收集的性能数据，如下所示

javascript 复制代码

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  endTime
) {
  console.log(`Profiler [${id}] - ${phase} - ${actualDuration} ms`);
}

只需优化应用程序并再次运行分析器。

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

条件呈现:分析性能

我们有一个有几个子组件的组件，它们根据组件的状态有条件地呈现。

我们需要分析这些子组件的呈现性能，以确保它们只在必要时呈现

javascript 复制代码

import { Profiler } from 'react';
import ComponentConditionalRendering from './ComponentConditionalRendering';
import ChildRE from './ChildRE';
import ChildCD from './ChildCD';

function App() {
  return (
    <Profiler id="ComponentConditionalRendering" onRender={onRenderCallback}>
      <ComponentConditionalRendering>
        <Profiler id="ChildRE" onRender={onRenderCallback}>
          <ChildRE />
        </Profiler>
        <Profiler id="ChildCD" onRender={onRenderCallback}>
          <ChildCD />
        </ComponentConditionalRendering>
    </Profiler>
  );
}

javascript 复制代码

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  endTime
) {
  console.log(`Profiler [${id}] - ${phase} - ${actualDuration} ms`);
}

让我们将该组件封装在组件中，并为该分析器提供一个id和一个onRender函数

onRender函数将返回以下参数:id, phase, actualDuration, baseDuration, startTime, endTime

分析性能并在需要时进行改进，然后重新运行分析器以检查是否一切正常

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

React Profiler vs React DevTools Profiler

React Profiler是一个组件，它可以测量React应用程序的特定组件
Devtools profiler是一个可视化的分析器，是react Devtools chrome /浏览器扩展的一部分
你需要将react Profiler包裹在组件周围，以收集与该组件相关的数据
React Dev工具分析器是一个完整的可视化的React应用性能分析器

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

使用react分析器的好处

性能瓶颈识别:您可以使用分析器组件度量单个组件的呈现性能。这使您能够找出造成性能瓶颈的原因并修复问题
监视组件渲染行为:您可以发现哪些不必要的渲染正在发生，并通过监视组件的渲染频率和每次渲染的成本来降低渲染成本，从而优化组件
当与开发工具react profiler一起使用时，性能数据可视化有助于可视化react应用程序的性能，使其易于理解、识别和解决性能问题

Dead Simple Chat可以让你轻松地将Chat添加到任何React应用程序中Javascript聊天SDK．

react分析器的缺点

仅在开发模式下工作: react分析器仅在开发模式下工作，因此您可以在生产环境中测量性能。要在生产环境中度量性能，需要启用一个特殊的生产构建，并启用分析
性能分析期间的性能开销: 记录性能需要cpu和资源，尽管性能分析器试图简化资源，但在分析期间确实消耗资源

结论

在本文中，我们解释了react分析器是如何工作的。React profiler是衡量React应用程序性能的优秀工具

您可以优化特定于组件的性能，react profiler也可以嵌套在其他组件中

Purpose: React profiler是一个性能测量工具，帮助你分析React组件，识别瓶颈，减少不必要的重复渲染
Built in profiler:React dev-tools有一个内置的分析器，它提供了一个可视化的界面来分析组件的渲染性能。您可以将react分析器与开发工具分析器结合使用
Profiler :该分析器组件可用于度量特定组件的性能。分析器组件也可以嵌套。Profiler有两个道具:id和onRenderCallback函数
onRenderCallback: onRenderCallback是一个传递给组件的函数。它返回可用于度量性能的各种性能指标

谢谢你阅读这篇文章