3

我正在为 React 使用 npm 包：

"react": "^16.8.4",
"react-dom": "^16.8.4"

和 React 开发工具 4.2.0 版

我想使用 React 分析器来分析我的应用程序的性能，但是我看不到道具的实际内容，也看不到提交阶段之间的状态：

在此处输入图像描述

探查器显示哪些道具发生了变化，但我实际上想看看道具是什么样子，如下所示：

在此处输入图像描述

此外，我用回调包装了我的组件，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参数的日志，但交互日志总是显示一个空集（虽然实际上有道具）。

有没有人遇到过像我这样的问题？我找不到任何类似的问题。

4

0 回答 0