\n\n这些文档已经过时且不再更新，访问 zh-hans.react.dev 查看新的 React 文档。
\n这些新的文档使用现代 React 语法：
\n\n
\n- \n
<Profiler>
Profiler 测量一个 React 应用多久渲染一次以及渲染一次的“代价”。\n它的目的是识别出应用中渲染较慢的部分，或是可以使用类似 memoization 优化的部分，并从相关优化中获益。
\n\n注意：
\nProfiling 增加了额外的开支，所以它在生产构建中会被禁用。
\n为了将 profiling 功能加入生产环境中，React 提供了使 profiling 可用的特殊的生产构建环境。\n从 fb.me/react-profiling了解更多关于如何使用这个构建环境的信息。
\n
Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销。\n它需要两个 prop ：一个是 id(string)，一个是当组件树中的组件“提交”更新的时候被React调用的回调函数 onRender(function)。
例如，为了分析 Navigation 组件和它的子代：
render(\n <App>\n <Profiler id=\"Navigation\" onRender={callback}> <Navigation {...props} />\n </Profiler>\n <Main {...props} />\n </App>\n);多个 Profiler 组件能测量应用中的不同部分：
render(\n <App>\n <Profiler id=\"Navigation\" onRender={callback}> <Navigation {...props} />\n </Profiler>\n <Profiler id=\"Main\" onRender={callback}> <Main {...props} />\n </Profiler>\n </App>\n);嵌套使用 Profiler 组件来测量相同一个子树下的不同组件：
render(\n <App>\n <Profiler id=\"Panel\" onRender={callback}> <Panel {...props}>\n <Profiler id=\"Content\" onRender={callback}> <Content {...props} />\n </Profiler>\n <Profiler id=\"PreviewPane\" onRender={callback}> <PreviewPane {...props} />\n </Profiler>\n </Panel>\n </Profiler>\n </App>\n);\n\n注意
\n尽管
\nProfiler是一个轻量级组件，我们依然应该在需要时才去使用它。对一个应用来说，每添加一些都会给 CPU 和内存带来一些负担。
onRender 回调 Profiler 需要一个 onRender 函数作为参数。\nReact 会在 profile 包含的组件树中任何组件 “提交” 一个更新的时候调用这个函数。\n它的参数描述了渲染了什么和花费了多久。
function onRenderCallback(\n id, // 发生提交的 Profiler 树的 “id”\n phase, // \"mount\" （如果组件树刚加载） 或者 \"update\" （如果它重渲染了）之一\n actualDuration, // 本次更新 committed 花费的渲染时间\n baseDuration, // 估计不使用 memoization 的情况下渲染整棵子树需要的时间\n startTime, // 本次更新中 React 开始渲染的时间\n commitTime, // 本次更新中 React committed 的时间\n interactions // 属于本次更新的 interactions 的集合\n) {\n // 合计或记录渲染时间。。。\n}让我们来仔细研究一下各个 prop:
\nid: string -\n发生提交的 Profiler 树的 id。\n如果有多个 profiler，它能用来分辨树的哪一部分发生了“提交”。phase: \"mount\" | \"update\" -\n判断是组件树的第一次装载引起的重渲染，还是由 props、state 或是 hooks 改变引起的重渲染。actualDuration: number -\n本次更新在渲染 Profiler 和它的子代上花费的时间。\n这个数值表明使用 memoization 之后能表现得多好。（例如 React.memo，useMemo，shouldComponentUpdate）。\n理想情况下，由于子代只会因特定的 prop 改变而重渲染，因此这个值应该在第一次装载之后显著下降。baseDuration: number -\n在 Profiler 树中最近一次每一个组件 render 的持续时间。\n这个值估计了最差的渲染时间。（例如当它是第一次加载或者组件树没有使用 memoization）。startTime: number -\n本次更新中 React 开始渲染的时间戳。commitTime: number -\n本次更新中 React commit 阶段结束的时间戳。\n在一次 commit 中这个值在所有的 profiler 之间是共享的，可以将它们按需分组。interactions: Set -\n当更新被制定时，“interactions” 的集合会被追踪。（例如当 render 或者 setState 被调用时）。\n","frontmatter":{"title":"Profiler API","next":null,"prev":null},"fields":{"path":"content/docs/reference-profiler.md","slug":"docs/profiler.html"}}},"pageContext":{"slug":"docs/profiler.html"}},"staticQueryHashes":[]}注意
\nInteractions 能用来识别更新是由什么引起的，尽管这个追踪更新的 API 依然是实验性质的。
\n\n