当前位置：首页 > article >正文

React如何检查组件性能

article 2024/11/15 5:24:17

可以使用Profiler来查看组件的渲染速度

Profiler的基本使用

需要将<Profiler>标签包裹在需要检查渲染速度的组件外部
需要绑定id属性，该属性是唯一标识，用于区分其他Profiler
需要onRender函数，该函数一共有六个参数，分别为
- id: 就是Profiler的id属性
- phase：用于标识组件的更新时机（mount | update | nested-update）
- actualDuration: 渲染组件的耗时
- baseDuration：理想情况耗时，actualDuration-baseDuration为组件执行时间
- startTime：初始化渲染时间
- commitTime：提交时间

import { Profiler, useState } from "react"

function Head({ count }) {
  return <div>Head --- count:{count}</div>
}
export default () => {
  const [count, setCount] = useState(0)
  const btnClick = () => {
    setCount(count + 1)
  }
  const onRender = (
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime
  ) => {
    console.log(id, phase, actualDuration, baseDuration, startTime, commitTime)
  }
  return (
    <>
      <Profiler id="Head" onRender={onRender}>
        <Head count={count} />
      </Profiler>
      <button onClick={btnClick}>+1</button>
    </>
  )
}