React如何检查组件性能

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

如果actualDuration与baseDuration的差值过大，就证明组件需要优化了，具体可以使用memo。

可视化插件

也可以通过React Develop Tools来查看当前组件的性能
React如何检查组件性能-LMLPHP
如果不会魔法，谷歌商店打不开也可也去极简插件下载
下载后F12进入开发者工具，进行如下操作也可以看到组件渲染速度

React如何检查组件性能-LMLPHP

田本初

React如何检查组件性能

Profiler的基本使用

可视化插件