react如何查看渲染时间
使用 React Developer Tools 检测渲染时间
React Developer Tools 是 Chrome 和 Firefox 的扩展程序，可用于分析组件的渲染性能。安装后，在浏览器开发者工具中选择 "Profiler" 标签页，记录组件的渲染过程。Profiler 会显示每次渲染的耗时、组件树结构以及具体时间分布。
使用 performance.now() 手动测量
在组件生命周期或函数中插入时间戳计算差值：
const startTime = performance.now();
// 渲染逻辑或组件执行
const endTime = performance.now();
console.log(`渲染耗时: ${endTime - startTime} 毫秒`);适用于测量特定代码块的执行时间。
通过 React 的 Profiler API
使用 React 内置的 <Profiler> 组件包裹目标组件：
import { Profiler } from 'react';
function onRenderCallback(
id, // 组件标识
phase, // "mount" 或 "update"
actualTime, // 本次渲染耗时
baseTime, // 预估不使用 memoization 的耗时
startTime, // 渲染开始时间戳
commitTime // React 提交更新的时间戳
) {
console.log(`渲染时间: ${actualTime}ms`);
}
<Profiler id="ExampleComponent" onRender={onRenderCallback}>
<ExampleComponent />
</Profiler>使用 Chrome Performance 工具
在 Chrome 开发者工具中切换到 "Performance" 标签，录制页面操作。时间轴会显示详细的脚本执行、渲染和绘制时间，包括 React 组件的更新过程。需注意启用 "Advanced Rendering Instrumentation" 选项获取更精确的 React 专用数据。
分析虚拟 DOM 差异
通过比较渲染前后虚拟 DOM 的生成时间，可间接判断渲染效率。结合 useMemo 或 React.memo 的使用情况，定位不必要的重复渲染。工具如 why-did-you-render 可辅助识别性能问题。
注意事项
- 生产环境需移除测量代码以避免性能开销。
- 多次测量取平均值以减少误差。
- 开发模式下的渲染时间通常比生产模式慢，建议通过生产构建测试最终性能。
