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

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

注意：

開(kāi)發(fā)的構(gòu)建過(guò)程比生產(chǎn)的構(gòu)建過(guò)程要慢，是因?yàn)樗蓄~外邏輯的提供，例如，友好的控制臺(tái)警告（生產(chǎn)構(gòu)建時(shí)會(huì)去掉）。因此，分析工具僅用于指出你應(yīng)用中相對(duì)影響性能的部分。

通用API

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

Perf.start()和Perf.stop()

開(kāi)始/停止檢測(cè)。React的中間操作被記錄下來(lái)，用于下面的分析?；ㄙM(fèi)一段微不足道的時(shí)間的操作會(huì)被忽略。

Perf.printInclusive(measurements)

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

Perf.printExclusive(measurements)

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

Perf.printWasted(measurements)

分析器最有用的部分。

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

Perf.printDOM(measurements)

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

高級(jí)API

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

Perf.getLastMeasurements()

從最后的開(kāi)始-停止會(huì)話中得到檢測(cè)結(jié)果數(shù)組。該數(shù)組包含對(duì)象，每個(gè)對(duì)象看起來(lái)像這樣：

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