import Perf from 'react-addons-perf' // ES6語法var Perf = require('react-addons-perf') // ES5語法針對nodejsvar Perf = React.addons.Perf; // ES5語法，針對瀏覽器，增加react-with-addons.js在script標籤中

• 1
• 2
• 3

1.概要

React本身就非常快速了，然而，如果你想進一步提升你的應用的效能的話，可以通過shouldComponentUpdate()來優化你的DOM diff演算法，這是我們之前就已經接觸或者是非常瞭解的優化方式。 除此之外，你還可以概述你的應用程式的總體效能，而Perf

如果你已經確定你的React應用存在效能上面的問題，可以使用這個工具來進行檢測，它會給出一些幫助性的警告，讓你能夠了解到一些東西。

然而，Perf工具只能用來處理React應用，同時它只會顯示效能最差的部分。

2.使用Perf

Perf物件是用於React的開發階段的，你不應該將這個包放在最終的應用程式包中。

 

獲得測試結果的方法

start()stop()getLastMeasurements()

• 1
• 2
• 3

 

列印結果方法

下面的方式是通過 Perf.getLastMeasurements()

printInclusive()printExclusive()printWasted()printOperations()printDOM()

• 1
• 2
• 3
• 4
• 5

3.函式詳解

start()，stop()

呼叫方式

Perf.start()// ...Perf.stop()

• 1
• 2
• 3

start/stop這兩個方法，放在你要測試效能的程式碼的兩端，如果操作消耗一些時間，但是這些時間是微不足道的，會被直接忽略(所以在小型的專案中，這個工具可能並不會有結果)。

在stop函式呼叫，停止測試後，你需要用Perf.getLastMeasurements()去得到測試的結果。

 

getLastMeasurements()

Perf.getLastMeasurements()

• 1

這個函式會得到一個關於之前測試資料結果的結構體，你可以儲存它或者通過列印函式將結果打印出來，從而去分析測試的結果。

注意

請不要依賴於返回的資料格式，也就是說盡可能用列印函式列印返回的結構體，因為這個格式可能在以後的版本中發生較大的變更，如果返回的格式已經被加入到公共的API中，那麼官方文件會進行更新。

 

printInclusive()

Perf.printInclusive(measurements)

• 1

這個函式會列印測試的總時間以及一些相關資訊，如果沒有什麼引數的話，函式會打印出所有的測試記錄，它同時會在控制檯直接以table的格式良好的進行顯示(在console中用console.table()函式可以進行table格式的顯示)

 

printExclusive()

Perf.printExclusive(measurements)

• 1

Exclusive單詞的意思是獨立，跟printInclusive有點類似，但是不會包括裝載元件的時間：處理props，componentWillMount和componentDidMount這些東西的時間都不會算進去。

 

printWasted()

Perf.printWasted(measurements)

• 1

這是Perf效能分析工具最有用的部分，”Wasted“浪費的時間：時間浪費在元件上但是又沒有用於去更新元件。

 

printOperations()

Perf.printOperations(measurements)

• 1

列印底層的一些操作

 

printDOM()

Perf.printDOM(measurements)

• 1

它是printOperations的別名，最終會被棄用。

 

下一篇將講React中的Test工具