性能分析工具

通常情況下，React 在沙箱中是非?？斓?。但是，在你應(yīng)用的一些情景中，你需要仔細推敲每一個性能點。React 提供了一個函數(shù) shouldComponentUpdate，通過這個函數(shù)，你能夠給React的差異檢查添加優(yōu)化代碼。

為了給你一個你的應(yīng)用總體的性能概覽，ReactPerf 是一個分析工具，告訴你需要把這些鉤子函數(shù)放在哪里。

注意：

開發(fā)的構(gòu)建過程比生產(chǎn)的構(gòu)建過程要慢，是因為所有額外邏輯的提供，例如，友好的控制臺警告（生產(chǎn)構(gòu)建時會去掉）。因此，分析工具僅用于指出你應(yīng)用中相對影響性能的部分。

通用API

當使用react-with-addons.js在開發(fā)模式下構(gòu)建的時候，這里描述的Perf對象是以React.addons.Perf的形式暴露出來的。

Perf.start()和Perf.stop()

開始/停止檢測。React的中間操作被記錄下來，用于下面的分析?；ㄙM一段微不足道的時間的操作會被忽略。

Perf.printInclusive(measurements)

打印花費的總時間。如果不傳遞任何參數(shù)，默認打印最后的所有檢測記錄。它會在控制臺中打印一個漂亮的格式化的表格，像這樣：

Perf.printExclusive(measurements)

“獨占（Exclusive）”時間不包含掛載組件的時間：處理props，getInitialState，調(diào)用componentWillMount和componentDidMount，等等。

Perf.printWasted(measurements)

分析器最有用的部分。

“浪費”的時間被花在根本沒有渲染任何東西的組件上，例如界面渲染后保持不變，沒有操作DOM元素。

Perf.printDOM(measurements)

打印底層DOM操作，例如，“設(shè)置innerHTML”和“移除節(jié)點”。

高級API

上面的打印方法使用Perf.getLastMeasurements()打印好看的結(jié)果。

Perf.getLastMeasurements()

從最后的開始-停止會話中得到檢測結(jié)果數(shù)組。該數(shù)組包含對象，每個對象看起來像這樣：

{  // 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}