Profile性能测试

<Profiler>让您以编程方式测量React树的渲染性能

1. 使用Profile

import './MapContainer.css'
import Head from './App40.jsx'
import { Profiler, useState } from 'react'
import { Button, Space } from 'antd'

function App() {
  // id-测试性能的组件可能有多个，id为Profiler上属性id值
  // phase-执行时机，有mount、update
  // actualDuration-渲染Profiler所有组件和子组件树的真实毫秒数
  // baseDuration-渲染Profiler的毫秒数，使用actualDuration-baseDuration可以得到我们的组件耗时
  // startTime-开始此次渲染的时间戳
  // commitTime-结束此次渲染的时间戳
  const headRender = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
    console.log(id, phase, actualDuration, baseDuration, startTime, commitTime)
  }
  const [count, setCount] = useState(0)
  function handleClick() {
    setCount(count + 1)
  }
  return (
    <>
      <Space>
        <div>Hello App {count}</div>
        <Button type='primary' onClick={handleClick}>点击</Button>
      </Space>
      <Profiler id='Head' onRender={headRender}>
        <Head/>
      </Profiler>
    </>
  )
}
export default App

运行效果：

2. 使用ReactDevTools分析

ReactDevTools工具也提供了性能分析功能, 点击Profiler查看：
点击左边的按钮可以记录页面加载情况，加载完毕会生成记录报告：