【React】Profiler 测量渲染

文章目录

Profiler 测量渲染一个 React 应用多久渲染一次以及渲染一次的“代价”。它的目的是识别出应用中渲染较慢的部分，或是可以使用类似 memoization 优化的部分，并从相关优化中获益。

尽管 Profiler 是一个轻量级组件，我们依然应该在需要时才去使用它。对一个应用来说，每添加一些都会给 CPU 和内存带来一些负担。

Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销。

它需要两个 prop ：
- 一个是 id(string)，
- 一个是当组件树中的组件“提交”更新的时候被React调用的回调函数 onRender(function)。
可以使用多个Profiler，也可以进行相互嵌套

import { Profiler } from "react"
render(<App><Profiler id="Panel" onRender={callback}><Panel {...props}><Profiler id="Content" onRender={callback}><Content {...props} /></Profiler><Profiler id="PreviewPane" onRender={callback}><PreviewPane {...props} /></Profiler></Panel></Profiler></App>
);

Profiler 需要一个 onRender 函数作为参数, 它的参数描述了渲染了什么和花费了多久。
React 会在 profile 包含的组件树中任何组件 “提交” 一个更新的时候调用这个函数。

function onRenderCallback(id, // 发生提交的 Profiler 树的 “id”phase, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一actualDuration, // 本次更新 committed 花费的渲染时间baseDuration, // 估计不使用 memoization 的情况下渲染整颗子树需要的时间startTime, // 本次更新中 React 开始渲染的时间commitTime, // 本次更新中 React committed 的时间interactions // 属于本次更新的 interactions 的集合
) {// 合计或记录渲染时间。。。
}

参数分析：

1. id: string - 发生提交的 Profiler 树的 id。
如果有多个 profiler，它能用来分辨树的哪一部分发生了“提交”。2. phase: "mount" | "update" - 判断是组件树的第一次装载引起的重渲染，
还是由 props、state 或是 hooks 改变引起的重渲染。3. actualDuration: number - 本次更新在渲染 Profiler 和它的子代上花费的时间。
这个数值表明使用 memoization 之后能表现得多好。（例如 React.memo，useMemo，shouldComponentUpdate）。
理想情况下，由于子代只会因特定的 prop 改变而重渲染，因此这个值应该在第一次装载之后显著下降。4. baseDuration: number - 在 Profiler 树中最近一次每一个组件 render 的持续时间。
这个值估计了最差的渲染时间。（例如当它是第一次加载或者组件树没有使用 memoization）。5. startTime: number - 本次更新中 React 开始渲染的时间戳。6. commitTime: number - 本次更新中 React commit 阶段结束的时间戳。
在一次 commit 中这个值在所有的 profiler 之间是共享的，可以将它们按需分组。7. interactions: Set - 当更新被制定时，“interactions” 的集合会被追踪。
（例如当 render 或者 setState 被调用时）。

【React】Profiler 测量渲染相关推荐

React Profiler API
Profiler 测量一个 React 应用多久渲染一次以及渲染一次的"代价".它的目的是识别出应用中渲染较慢的部分,或是可以使用类似 memoization 优化的部分,并从相关 ...
用 TypeScript 编写一个 React 服务端渲染库（1）
前言代码都甩在 Github 上面了,欢迎随手 star ? 踩坑的过程大概都在 TypeScript + Webpack + Koa 搭建 React 服务端渲染这篇文章里面踩坑的 DEMO ...
STM32 电机教程 1 - 用ST Motor Profiler 测量无刷电机参数
前言在对电机进行控制前,往往需要先知道电机的一些参数,但是在实际应用过程中,经常会出现在控制一个电机参,但对电机的参数如相电阻电感的参数不够了解的情况,本节给大家演示基本ST Motor Profi ...
React服务端渲染实现（基于Dva)
React服务端渲染实现 (基于Dva) 功能基于 Dva 的 SSR 解决方案 (react-router-v4, redux, redux-saga) 支持 Dynamic Import (不再 ...
ssr Android简书,react服务端渲染ssr
Next.js 一个轻量级的 React 服务端渲染框架 1 概念 SPA single page application : 单页面应用程序缺点:首屏加载慢,不利于SEO SSR Server-s ...
react中列表渲染的局部刷新
最近在写demo的时候遇到一个更新列表中某个的对象的某个值,最期待的结果肯定是局部刷新,但是我们往往在改变值之后会遇到全局都刷新的问题,以下为个人实验出来的一个小技巧. 首先我有以下数据需要通过rea ...
手把手带你用next搭建一个完善的react服务端渲染项目（集成antd、redux、样式解决方案）
前言本文参考了慕课网jokcy老师的React16.8+Next.js+Koa2开发Github全栈项目,也算是做个笔记吧. 源码地址 github.com/sl1673495/n- 介绍 Next ...
美少女秃头思考：react服务端渲染
富婆来报道,今天想问题想不出来,随手抓了一下头发,没想到啊没想到,我那浓(mei)密(sheng)茂(ji)盛(gen)的秀发又少了好几根,一定要改掉这个想不出来问题就揪头发的坏习惯.你们遇到问题想不 ...
React的服务器渲染和客户端渲染
React的服务器渲染和客户端渲染简单谈一谈React服务器渲染和React客户端渲染首先我们来区分一下: React客户端渲染和 React服务端渲染两者的区别: React客户端渲染: 1 ...

【React】Profiler 测量渲染

文章目录

【React】Profiler 测量渲染相关推荐

最新文章

热门文章