当前位置：首页 > React

react如何查看渲染时间

2026-01-24 13:04:28React

测量 React 组件渲染时间的方法

使用 React DevTools 的 Profiler 功能
React DevTools 提供了 Profiler 工具，可以记录组件的渲染时间。安装 React DevTools 扩展后，在浏览器开发者工具中切换到 "Profiler" 标签，点击 "Record" 开始记录交互过程，停止后会显示各组件的渲染耗时。

使用 performance.now() 手动测量
在组件的生命周期或 Hook 中插入时间戳计算差值。例如在函数组件中：

react如何查看渲染时间

import { useEffect, useRef } from 'react';

function MyComponent() {
  const startTime = useRef(performance.now());

  useEffect(() => {
    const endTime = performance.now();
    console.log(`渲染耗时: ${endTime - startTime.current}ms`);
  });

  return <div>...</div>;
}

使用 console.time() 和 console.timeEnd()
在类组件的生命周期方法或函数组件的 Hook 中标记时间：

react如何查看渲染时间

componentDidUpdate() {
  console.timeEnd('render');
}

componentDidMount() {
  console.time('render');
}

React 18 的 <Profiler> API
React 18 提供了内置的 <Profiler> 组件，用于测量子树渲染性能：

import { Profiler } from 'react';

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime
) {
  console.log(`渲染时间: ${actualDuration}ms`);
}

<Profiler id="MyComponent" onRender={onRenderCallback}>
  <MyComponent />
</Profiler>

注意事项