我在使用React的npm软件包:
"react": "^16.8.4","react-dom": "^16.8.4"
和React Dev工具版本4.2.0
我想使用React Profiler分析我的应用程序的性能,但是我看不到道具的实际内容,也看不到提交阶段之间的状态:
探查器显示哪些道具已更改,但我实际上想查看here所示的道具:
此外,我用unstable_Profiler
包裹了组件,以便使用onRender
回调记录交互设置,如下所示:
import React,{ Component,Fragment,unstable_Profiler as Profiler } from 'react';
class MyApp extends Component {
onRender = (
id,// the "id" prop of the Profiler tree that has just committed
phase,// either "mount" (if the tree just mounted) or "update" (if it re-rendered)
actualDuration,// time spent rendering the committed update
baseDuration,// estimated time to render the entire subtree without memoization
startTime,// when React began rendering this update
commitTime,// when React committed this update
interactions // the Set of interactions belonging to this update
) => {
console.log(`id=${id} phase=${phase} actualDuration=${actualDuration} baseDuration=${baseDuration}
startTime=${startTime} commitTime=${commitTime}`)
console.log('interactions',interactions)
}
render() {
return (
<Profiler id="123" onRender={this.onRender}>
//MyApp component
<Profiler>
}
}
虽然我确实看到了所有onRender
参数的日志,但交互日志始终显示为空集(实际上有道具)。
有人遇到像我这样的问题吗?我找不到任何类似的问题。