React(精读官方文档) -高级指引 - Profiler

React 性能分析可以通过 Profiler API 来进行。以下是一个使用 Profiler 的例子：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
 
const App = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};
 
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

为了分析这个应用的性能，你可以使用 react-dom/profiling 模块中的 Profiler 组件来包裹 App 组件：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Profiler } from 'react-dom/profiling';
import { logProfilerData } from './logProfilerData';
 
const App = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};
 
const rootElement = document.getElementById("root");
ReactDOM.render(
  <Profiler id="App" onRender={logProfilerData}>
    <App />
  </Profiler>,
  rootElement
);

在上面的代码中，logProfilerData 是一个自定义的回调函数，用于处理性能分析数据。这个函数会在每次渲染前后被调用，并且会接收到一些性能数据，例如渲染的起始时间和结束时间，以及能够帮助识别更新与渲染相关性的标识。

const logProfilerData = (id, phase, actualTime, baseTime, startTime, commitTime) => {
  console.log({
    id,
    phase,
    actualTime,
    baseTime,
    startTime,
    commitTime,
  });
};

使用 Profiler 时，请记得它会增加额外的开销，因此不应该在生产环境中长期开启性能分析。它主要用于定位和解决性能问题。