# Profiler API

Profiler 测量渲染一个 React 应用多久渲染一次以及渲染一次的“代价”。它的目的是识别出应用中渲染较慢的部分，或是可以使用 类似 memoization 优化 的部分，并从相关优化中获益。

WARNING

注意：

Profiling 增加了额外的开支，所以它在生产构建中会被禁用。

为了将 profiling 功能加入生产环境中，React 提供了使 profiling 可用的特殊的生产构建环境。从 fb.me/react-profiling了解更多关于如何使用这个构建环境的信息。

# 用法

Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销。它需要两个 prop ：一个是 id (string)，一个是当组件树中的组件“提交”更新的时候被React调用的回调函数 onRender (function)。

例如，为了分析 Navigation 组件和它的子代：

render(
  <App>

    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
    <Main {...props} />
  </App>
);

多个 Profiler 组件能测量应用中的不同部分：

render(
  <App>

    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>

    <Profiler id="Main" onRender={callback}>
      <Main {...props} />
    </Profiler>
  </App>
);

嵌套使用 Profiler 组件来测量相同一个子树下的不同组件。

render(

  <App>
    <Profiler id="Panel" onRender={callback}>
      <Panel {...props}>
        <Profiler id="Content" onRender={callback}>

          <Content {...props} />
        </Profiler>

        <Profiler id="PreviewPane" onRender={callback}>
          <PreviewPane {...props} />
        </Profiler>
      </Panel>
    </Profiler>
  </App>
);

WARNING

注意

尽管 Profiler 是一个轻量级组件，我们依然应该在需要时才去使用它。对一个应用来说，每添加一些都会给 CPU 和内存带来一些负担。

# onRender 回调

Profiler 需要一个 onRender 函数作为参数。 React 会在 profile 包含的组件树中任何组件 “提交” 一个更新的时候调用这个函数。它的参数描述了渲染了什么和花费了多久。

function onRenderCallback(
  id, // 发生提交的 Profiler 树的 “id”
  phase, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一
  actualDuration, // 本次更新 committed 花费的渲染时间
  baseDuration, // 估计不使用 memoization 的情况下渲染整颗子树需要的时间
  startTime, // 本次更新中 React 开始渲染的时间
  commitTime, // 本次更新中 React committed 的时间
  interactions // 属于本次更新的 interactions 的集合
) {
  // 合计或记录渲染时间。。。
}

让我们来仔细研究一下各个 prop:

Profiler id
Profiler React.memo useMemo shouldComponentUpdate
Profiler render
“interactions” render setState

WARNING

注意

Interactions 能用来识别更新是由什么引起的，尽管这个追踪更新的 API 依然是实验性质的。

从 fb.me/react-interaction-tracing 了解更多

← Portals 不使用 ES6 →