ReactJS -性能分析器API

---

---

性能分析是一种重要的技术，用于收集和显示特定函数在实时环境中执行所需的时间。性能分析通常用于查找应用程序中的性能瓶颈。React 提供了两种性能分析React应用程序的方法。

• Profiler组件

• Profiler DevTools

Profiler组件

React Profiler组件只是另一个React组件，用于记录React组件的性能信息。Profiler组件可以用于React元素树中的任何位置。React接受多个Profiler以及Profiler的多级嵌套。本章我们将检查签名以及如何在React应用程序中应用Profiler。

Profiler组件的签名

Profiler组件可以嵌套任何React组件，并需要两个props：

• id

• Profiler组件的标识符

• onRender回调函数

• 在组件渲染的每个阶段调用的回调函数

回调函数的签名如下：

function onRenderCallback(
   id,
   phase,
   actualDuration,
   baseDuration,
   startTime,
   commitTime,
   interactions
){
   // Do anything with the profiler information
}

一个示例回调函数实现，用于将性能分析数据记录到控制台，如下所示：

const logProfilerData = (id, phase, actualTime, baseTime, startTime, commitTime) => {
   console.log(`${id}'s ${phase} phase:`);
   console.log(`Actual time: ${actualTime}`);
   console.log(`Base time: ${baseTime}`);
   console.log(`Start time: ${startTime}`);
   console.log(`Commit time: ${commitTime}`);
};

应用Profiler

在本节中，我们将创建一个新的React应用程序来学习如何在其中应用Profiler组件。

首先，使用以下命令创建一个新的React应用程序并启动它。

create-react-app myapp
cd myapp
npm start

接下来，打开App.css (src/App.css)并删除所有CSS类。

// remove all css classes

接下来，创建一个简单的Hello组件，Hello (src/Components/Hello.js)，并渲染一条简单的消息，如下所示：

import React from "react";
class Hello extends React.Component {
   constructor(props) {
      super(props)
   }
   render() {
      return (
         <div>Hello, {this.props.name}</div>
      );
   }
}
export default Hello;

这里：

• 使用name props来使用给定的名称渲染Hello消息

接下来，打开App组件 (src/App.js)，并使用Profiler组件，如下所示：

import './App.css'
import React, { Profiler } from 'react';
import Hello from './Components/Hello'
const logProfilerData = (id, phase, actualTime, baseTime, startTime, commitTime) => {
   console.log(`${id}'s ${phase} phase:`);
   console.log(`Actual time: ${actualTime}`);
   console.log(`Base time: ${baseTime}`);
   console.log(`Start time: ${startTime}`);
   console.log(`Commit time: ${commitTime}`);
};
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Profiler id="helloWorld" onRender={logProfilerData}>
                  <Hello name="World" />
               </Profiler>
            </div>
         </div>
      </div>
   );
}
export default App;

这里：

• 从react包中导入了Profiler组件

• 使用Hello组件，并用Profiler组件将其包装起来

• 创建了一个回调函数，logProfilerData，并将所有Profiler数据输出到控制台

• 在Profiler组件的onRender props中设置了logProfilerData回调函数

最后，在浏览器中打开应用程序并检查最终结果。它将渲染Hello组件，如下所示：

打开控制台，您可以看到性能分析信息，如下所示：

helloWorld's mount phase:
App.js:7 Actual time: 4.900000000372529
App.js:8 Base time: 1.800000000745058
App.js:9 Start time: 515.7999999988824
App.js:10 Commit time: 525.9000000003725
...
App.js:6 helloWorld's update phase:
App.js:7 Actual time: 1
App.js:8 Base time: 0.6999999992549419
App.js:9 Start time: 19836.900000000373
App.js:10 Commit time: 19838.400000000373

Profiler React DevTools

React DevTools插件为Profiler引入了一个单独的部分。开发者可以打开Profiler选项卡，并获得许多关于应用程序的有用见解。Profiler DevTools中提供的一些功能如下：

• 浏览提交

• 过滤提交

• 火焰图

• 排名图

• 组件图

结论

React Profiler组件和Profiler DevTools是不可或缺且强大的工具，用于分析和优化React应用程序。