react如何查看渲染时间
测量 React 组件渲染时间的方法
使用 React DevTools 的 Profiler 功能
React DevTools 提供了 Profiler 工具，可以记录组件的渲染时间。安装 React DevTools 扩展后，在浏览器开发者工具中切换到 "Profiler" 标签，点击 "Record" 开始记录交互过程，停止后会显示各组件的渲染耗时。
使用 performance.now() 手动测量
在组件的生命周期或 Hook 中插入时间戳计算差值。例如在函数组件中：
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 中标记时间：
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>注意事项
- 开发环境的渲染时间通常比生产环境慢，建议在生产构建中测试性能
- 避免过度优化，只有当实际性能问题出现时才进行深度检测
- 多次测量取平均值可减少误差
