在github上编辑这篇文章

性能工具#

React 通常是相当快的。然而，在你需要压榨你的 app 的每一分性能的情况下，它提供了一个shouldComponentUpdate 钩子，在此你可以添加优化提示到 React 的 diff 算法里。

除了给予你一个你的 app 的整体性能概览外，ReactPerf 还是一个准确告诉你，你需要在哪里放置这些钩子的分析工具。

General API#

这里陈述的 Perf 对象被用 require('react-addons-perf') 暴露，并且只能被使用在 React 的开发模式。你不应在生产环境下在你的 app 包含这个包。

注意:

开发版的 React 慢于生产版，因为所有额外提供的逻辑，例如，React 的友好的控制台警告 （在生产版中被除去）。因此，分析工具仅服务于指示你的 app 相对 昂贵的部分。

Perf.start() and Perf.stop()#

开始/停止测量。其间的React操作被记录用于之后的分析。产生无关紧要时间的操作被忽略。

在停止以后，你将需要 Perf.getLastMeasurements() （下面将介绍）来获取测量结果。

Perf.printInclusive(measurements)#

打印总体花费的时间。如果没有传入参数，默认是从上次记录的所有测量数据。它在控制台里打印良好格式化的结果，像这样：

Perf.printExclusive(measurements)#

"独占的"时间不包括花费于加载组件的时间： 处理 props, getInitialState, 调用 componentWillMount 及 componentDidMount, 等等。

Perf.printWasted(measurements)#

分析工具里最有用的部分.

"垃圾"时间是花费在组件上实际没有绘制任何东西的时间，例如渲染结果总是相同，所以 DOM 没有被触碰到。

Perf.printDOM(measurements)#

打印底层的 DOM 操纵，例如 "set innerHTML" 和 "remove".

Advanced API#

以上的打印方法使用 Perf.getLastMeasurements() 来美观的打印结果。

Perf.getLastMeasurements()#

从最后的 start-stop 会话获取测量数据数据。这个数组包含对象，每个看起来像这样：

{
  // The term "inclusive" and "exclusive" are explained below
  "exclusive": {},
  // '.0.0' is the React ID of the node
  "inclusive": {".0.0": 0.0670000008540228, ".0": 0.3259999939473346},
  "render": {".0": 0.036999990697950125, ".0.0": 0.010000003385357559},
  // Number of instances
  "counts": {".0": 1, ".0.0": 1},
  // DOM touches
  "writes": {},
  // Extra debugging info
  "displayNames": {
    ".0": {"current": "App", "owner": "<root>"},
    ".0.0": {"current": "Box", "owner": "App"}
  },
  "totalTime": 0.48499999684281647
}