4.5 Profiler组件和ReactDevTools的性能测试

一、`<Profiler>`和ReactDevTools的性能测试

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

 import { useState, Profiler } from 'react'
 
 function Head({ count }) {
   console.log(count)
   return (
     <>
       <div>Default Head</div>
     </>
   )
 }
 
 function App() {
   const [count, setCount] = useState(0)
 
   const onRender = (
     id, // 表示
     phase, // 执行时机
     actualDuration, // 渲染组件的耗时，毫秒，
     baseFuration, // 理想情况下的耗时，毫秒，
     startTime, // 当前页面初始到现在的时间，毫秒，
     commitTime // 当前页面初始到现在执行完毕的时间，毫秒，
   ) => {
     console.log(id, phase, actualDuration, baseFuration, startTime, commitTime)
   }
 
   return (
     <>
       <div>Default Template</div>
       <button onClick={() => setCount(count + 1)}>按钮</button>
       {count}
       <Profiler id="Head" onRender={onRender}>
         <Head count={count} />
       </Profiler>
     </>
   )
 }
 
 export default App

可以直接查看控制台，或者浏览器中安装插件，查看Profiler

上一页4.4 createPortal渲染到DOM的不同部分下一页4.6 hydrateRoot水合与服务端API

最后更新于2年前

一、<Profiler>和ReactDevTools的性能测试

一、`<Profiler>`和ReactDevTools的性能测试