react组件:profiler

React Profiler 主要用于开发过程中的性能分析和优化,而不应在生产环境中使用,因为它可能会对性能产生一定的影响。

使用 包裹组件树,以测量其渲染性能。

**

id:字符串,用于标识正在测量的 UI 部分。

onRender:onRender 回调函数,当包裹的组件树更新时,React 都会调用它。它接收有关渲染内容和所花费时间的信息。

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {

// 对渲染时间进行汇总或记录...

}

phase:为 "mount"、"update" 或 "nested-update" 中之一。这可以让你知道组件树是首次挂载还是由于 props、state 或 hook 的更改而重新渲染。

actualDuration:在此次更新中,渲染 组件树的毫秒数。这可以显示子树在使用记忆化(例如 memo 和 useMemo)后的效果如何。理想情况下,此值在挂载后应显著减少,因为许多后代组件只会在特定的 props 变化时重新渲染。

baseDuration:估算在没有任何优化的情况下重新渲染整棵 子树所需的毫秒数。它通过累加树中每个组件的最近一次渲染持续时间来计算。此值估计了渲染的最差情况成本(例如初始挂载或没有使用记忆化的树)。将其与 actualDuration 进行比较,以确定记忆化是否起作用。

startTime:当 React 开始渲染此次更新时的时间戳。

commitTime:当 React 提交此次更新时的时间戳。此值在提交的所有 profiler 中共享,如果需要,可以对它们进行分组。

**

编程式测量渲染性能

**

使用 组件包裹 React 树以测量其渲染性能。

这需要两个属性:id(字符串)和 onRender 回调函数(函数),每当 React 树中的任何组件"提交"更新时都将调用该函数。

**

进行性能分析会增加一些额外的开销,因此 在默认情况下,它在生产环境中是被禁用的。如果要启用生产环境下的性能分析,你需要启用 特殊的带有性能分析功能的生产构建。

测量应用的不同部分

虽然 是一个轻量级组件,但它应该仅在必要时使用。每次使用都会给应用增加一些额外的 CPU 和内存开销。

相关推荐
shadow fish8 小时前
react学习记录(三)
javascript·学习·react.js
NEXT068 小时前
受控与非受控组件
前端·javascript·react.js
早點睡3909 小时前
高级进阶 React Native 鸿蒙跨平台开发:react-native-svg(CAPI) 矢量图形代码指南
react native·react.js·harmonyos
Swift社区10 小时前
React 项目生产环境构建与静态资源优化
前端·react.js·前端框架
ZaneAI11 小时前
🚀 Vercel AI SDK 使用指南: 子代理 (Subagents)
react.js·agent
3秒一个大18 小时前
深入解析 React 回到顶部(BackToTop)组件的实现与设计
前端·react.js·typescript
Jing_Rainbow19 小时前
【React-9/Lesson93(2025-12-30)】React Hooks 深度解析:从基础到实战🎯
前端·javascript·react.js
果粒蹬i20 小时前
【HarmonyOS】RN of HarmonyOS实战开发项目+React数据管理方案
react.js·华为·harmonyos
宇擎智脑科技21 小时前
AntV G6、X6 与 React Flow 深度对比:核心差异与大模型时代的应用场景分析
前端·人工智能·react.js·前端框架
程序哥聊面试21 小时前
React + TS 初始化新项目报错解决方法
前端·react.js·npm