React使用react profiler wrap函数来测量api调用和渲染的时间

Question

有人可以向我解释React Profiler wrap如何与异步调用一起工作吗？我正在尝试测量发出api请求和呈现所需的时间：

import React, { unstable_Profiler as Profiler } from 'react';
import { unstable_trace as trace, unstable_wrap as wrap } from "scheduler/tracing";
import axios from 'axios';

import List from './List';

class App extends React.Component {
state = {
count: 0,
data: null
};

componentDidMount() {
this.fetchData();
}

logProfile = (id, phase, actualTime, baseTime, startTime, commitTime, interactions) => {
console.log('--------- logProfile fired -----------')
console.log(${id}'s ${phase.toUpperCase()} phase:);
console.log(Actual time: ${actualTime} ms);
console.log(Base time: ${baseTime} ms);
console.log(Start time (since component mounted): ${startTime} ms);
console.log(Commit time (since component mounted): ${commitTime} ms);
console.log(interactions);
};

go = direction => () => this.setState(({ count }) => ({
count: direction === "up" ? count + 1 : count - 1
}));

fetchData = () => {
trace("Fetch todos", performance.now(), () => {
this.setState({ data: null });
wrap(async () => {
try {
const { data } = await axios.get('https://jsonplaceholder.typicode.com/todos/');
this.setState({ data });
} catch (e) {
console.log(e);
}
})()
});
}

render() {
return (

<button onClick={this.go("up")}>up
The count is {this.state.count}

<button onClick={this.go("down")}>down

<button onClick={() => this.fetchData()}>refetch

);
}
}
export default App;

以上，我试图使用来自React Profiler的跟踪和包装函数来测量进行api调用和呈现所需的时间