React Profiler API
Profiler 测量一个 React 应用多久渲染一次以及渲染一次的“代价”。它的目的是识别出应用中渲染较慢的部分,或是可以使用类似 memoization 优化的部分,并从相关优化中获益。
注意:Profiling 增加了额外的开支,所以它在生产构建中会被禁用。
用法
Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销。它需要两个 prop :一个是 id(string),一个是当组件树中的组件“提交”更新的时候被React调用的回调函数 onRender(function)。
例如,为了分析 Navigation 组件和它的子代:
render(<App><Profiler id="Navigation" onRender={callback}><Navigation {...props} /></Profiler><Main {...props} /></App>
);
多个 Profiler 组件能测量应用中的不同部分:
render(<App><Profiler id="Navigation" onRender={callback}><Navigation {...props} /></Profiler><Profiler id="Main" onRender={callback}><Main {...props} /></Profiler></App>
);
嵌套使用 Profiler 组件来测量相同一个子树下的不同组件:
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 是一个轻量级组件,我们依然应该在需要时才去使用它。对一个应用来说,每添加一些都会给 CPU 和内存带来一些负担。
onRender 回调
Profiler 需要一个 onRender 函数作为参数。React 会在 profile 包含的组件树中任何组件 “提交” 一个更新的时候调用这个函数。它的参数描述了渲染了什么和花费了多久。
function onRenderCallback(id, // 发生提交的 Profiler 树的 “id”phase, // "mount" (如果组件树刚加载) 或者 "update" (如果它重渲染了)之一actualDuration, // 本次更新 committed 花费的渲染时间baseDuration, // 估计不使用 memoization 的情况下渲染整颗子树需要的时间startTime, // 本次更新中 React 开始渲染的时间commitTime, // 本次更新中 React committed 的时间interactions // 属于本次更新的 interactions 的集合
) {// 合计或记录渲染时间。。。
}
让我们来仔细研究一下各个 prop:
id: string - 发生提交的 Profiler 树的 id。如果有多个 profiler,它能用来分辨树的哪一部分发生了“提交”。
phase: "mount" | "update" - 判断是组件树的第一次装载引起的重渲染,还是由 props、state 或是 hooks 改变引起的重渲染。
actualDuration: number - 本次更新在渲染 Profiler 和它的子代上花费的时间。这个数值表明使用 memoization 之后能表现得多好。(例如 React.memo,useMemo,shouldComponentUpdate)。理想情况下,由于子代只会因特定的 prop 改变而重渲染,因此这个值应该在第一次装载之后显著下降。
baseDuration: number - 在 Profiler 树中最近一次每一个组件 render 的持续时间。这个值估计了最差的渲染时间。(例如当它是第一次加载或者组件树没有使用 memoization)。
startTime: number - 本次更新中 React 开始渲染的时间戳。
commitTime: number - 本次更新中 React commit 阶段结束的时间戳。在一次 commit 中这个值在所有的 profiler 之间是共享的,可以将它们按需分组。
interactions: Set - 当更新被制定时,“interactions” 的集合会被追踪。(例如当 render 或者 setState 被调用时)。
React Profiler API相关推荐
- gatsby_与Gatsby一起使用React Context API
gatsby I'm a bit late to the party using the new React Context API, I did get to use it the other da ...
- react调用api等待返回结果_React新Context API在前端状态管理的实践
### React新Context API在前端状态管理的实践 众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较为繁琐不好管理,通常我们需要使用Redu ...
- swr,解决 React 项目 API 调用的最好方案
swr,解决 React 项目 API 调用的最好方案 搜了一圈,感觉 swr 源码学习的文章不少,但是好像使用方面的确实有限,所以-- 目前体感是觉得使用 swr 会比 redux-saga 要舒服 ...
- React学习笔记6:React Hooks API总结
useState-保存状态(惰性初始化) 作用 函数组件添加状态 注意事项 初始化以及更新state 用来声明状态变量 使用步骤(使用useState来创建状态) 引入import React,{us ...
- 10分钟学会React Context API
Create-react-app来学习这个功能: 注意下面代码红色的即可,非常简单. 在小项目里Context API完全可以替换掉react-redux. 修改app.js import React ...
- react draft api 简介
draft.js api https://draftjs.org/docs/quic... 基础API 这个文档提供了一些基础的draftapi概览. Controlled Input Editor组 ...
- react api_使用Java EE 8中的React式API加速服务
react api 服务通常可以通过异步处理进行优化,即使不改变其对外界的行为. 某些服务效率不高的原因是,它们需要等待其他服务提供结果才能继续下去. 让我们看一下如何在不等待外部REST服务的情况下 ...
- react api_使用React流API将Akka流与rxJava结合在一起
react api 这次只是快速的一篇文章,因为我仍在尝试这种东西. 关于React式编程有很多话题. 在Java 8中,我们有Stream API,有rxJava我们有ratpack ,Akka有a ...
- React Profiler Chrome Tool
简单记录下chrome的react工具,Profiler如何使用 1.首先不多说,你需要安装一个react的chrome的插件. 在许久之前,只有一个Element.... 2. 跟Chrome自带的 ...
最新文章
- Word for mac 分小节问题
- Web.config中连接字符串的加密和解密
- Swift:在Safari中打开App
- 【转】Python 简介
- 在Browser Application中使用XNA
- reac——父组件向子组件传递值,子组件何时能同步获得父组件改变后的值
- tf.reduce_mean
- 代码之美——Doom3源代码赏析
- BIND配置文件详解(二)
- JavaScript 怎么合并两个JSON,并覆盖重复键
- 虚拟机是怎么实现的?(转)
- python.day.04——常用数据类型(一):strList
- 光谱共焦的干涉测量原理及厚度测量模式
- Db2数据库:日期函数DATE函数
- Cocos Creator下JavaScript实现口红机,附代码
- 工作几年了,还没成为“算法人上人”?
- 『Flutter开发实战』一小时掌握Dart语言
- ThinkCMF-smeta扩展字段
- 神经网络——bias
- 温故而知新CentOS宝塔
热门文章
- calendR :为你定制私人专属日历
- 给大忙人们看的 Java NIO 极简教程
- 国行 iPhone 12/Pro/Max双卡模式支持5G网络;支付宝推出「晚点付」功能;MySQL 8.0.22 GA|极客头条
- 江湖有故人,欢迎来到程序员的江湖
- 华为上半年收入4540亿元;GitHub服务中断,已恢复​;Python 3.8.4发布|极客头条
- 小米回应林斌退休传闻;哈工大等高校被禁止使用 MATLAB;统信软件 UOS20 SP1 系统升级| 极客头条...
- 十步教你成为数据科学家!
- 我逛了下 JDK 一条街,发现了不少好东西!
- 鏖战九载,Google 是否会因 Oracle 而弃用 Java?
- 未来的 AI 芯片将提升百倍性能!