【React】React如何检查组件性能

田本初

已于 2024-02-20 22:55:24 修改

阅读量1k

点赞数 10

分类专栏： React 文章标签： react.js javascript 前端

于 2023-12-03 21:19:33 首次发布

本文链接：https://blog.csdn.net/owo_ovo/article/details/134770669

版权

React 专栏收录该内容

43 篇文章 4 订阅

订阅专栏

可以使用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>
    </>
  )
}