React(精读官方文档) -高级指引 - Profiler

哈哈小码农

于 2023-02-03 16:41:55 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/xbczrz/article/details/128870580

React Profiler组件用于衡量应用的渲染时间和开销，帮助识别性能瓶颈，支持优化如memoization。Profiler需要'id'和'onRender'回调，后者在组件提交更新时触发，提供关于渲染的详细信息，包括id、阶段、实际和基础持续时间、开始和提交时间，以及交互集合，助力性能调试和提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    Profiler 
用于 测量渲染一个React应用多久渲染一次以及渲染一次的‘代价’，它的目的是识别出应用中渲染比较慢的部分，或是可以使用类似 memoization 优化的部分，并从相关优化中获益。
Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销
它在生产构建中会被禁用
 
用法 
需要两个 prop ：
 
  id:string类型
 
 
  回调函数：是当组件树中的组件“提交”更新的时候被React调用的回调函数 onRender(function)。render(
  <App>
    <Profiler id="Navigation" onRender={
       callback}>
      <Navigation {
       ...props} />
    </Profiler>
    <Main {
       ...props} />
  </

                

最低0.47元/天解锁文章