Profiler

Code SandBox

可以前往

https://codesandbox.io/s/react-profiler-example-o75nc?fontsize=14&hidenavigation=1&theme=dark 在線編輯效果。

Profiler 是 React 中的一個(gè)組件，由 B. Vaughn 開發(fā)，它可以測(cè)量 React 應(yīng)用渲染的頻率和渲染所花費(fèi)的時(shí)間資源。Profiler 提供一個(gè)函數(shù)屬性 onRender，當(dāng)組件 mount 或者 update 的時(shí)候，這個(gè)函數(shù)會(huì)接受到一些時(shí)間指標(biāo)。用這些時(shí)間指標(biāo)你就可以發(fā)現(xiàn)效率低下的代碼了。

import React, { Profiler } from 'react'; 
 
... 
<Profiler id="Counter1" onRender={this.callback1(this)}> 
  <Counter1 /> 
</Profiler> 

id 用來標(biāo)識(shí)對(duì)應(yīng)的 Profiler 組件，onRender 函數(shù)會(huì)在組件 mount 或者 update 的時(shí)候執(zhí)行，它的參數(shù)結(jié)構(gòu)如下：

function onRenderCallback(  id, 
  phase, 
  actualDuration,  
  baseDuration, 
  startTime, 
  commitTime,) { 
  console.log('onRenderCallback', { 
    id, 
    phase, 
    actualDuration,  
    baseDuration, 
    startTime, 
    commitTime, 
  }) 
} 

• id 組件 id;
• phase 執(zhí)行階段，mount 或者 update;
• actualDuration Profiler 和子組件渲染當(dāng)前的更新所花費(fèi)的時(shí)間，這個(gè)值在首次 mount 的時(shí)候比 update 階段的值大;
• baseDuration 子組件最近一次渲染所持續(xù)的時(shí)長
• startTime 開始渲染當(dāng)前的更新的時(shí)間戳
• commitTime React 提交當(dāng)前更新的時(shí)間戳

這些數(shù)據(jù)可以幫助我們分析組件運(yùn)行的效率，找到性能瓶頸。

React Developer tools

React Developer tools 是 React 官方團(tuán)隊(duì)發(fā)布的一個(gè)瀏覽器插件，功能十分強(qiáng)大。我要介紹的是 Highlight Update 這個(gè)功能。這個(gè)工具用來檢測(cè)組件重復(fù)渲染非常有效。他可以用不同的顏色來標(biāo)識(shí)組件的邊框，顏色越黃表示這個(gè)組件重復(fù)渲染的次數(shù)越多。

如果你有一個(gè)組件樹像下面這樣：

如果 Main 組件重復(fù)渲染了，那么封裝 Counter 和 Count 組件的邊界就會(huì)出現(xiàn)一個(gè)邊框表示重復(fù)渲染。

我們激活這個(gè)特性之后,在 ReactJS 官網(wǎng)開啟關(guān)閉右側(cè)的菜單，會(huì)出現(xiàn)邊框提示：

如何激活這個(gè)特性呢?找到調(diào)試工具的 Components 一欄，點(diǎn)擊右上角的小齒輪，再選中彈窗中的 Highlight updates when components render.

邊框的類型取決于重復(fù)渲染的程度，重復(fù)渲染越多，顏色越深。

|    綠色 - 低頻次更新 
|    藍(lán)色 - 一般頻次更新 
v    紅色 - 高頻次更新 

通過使用這個(gè)工具，我們可以通過邊框顏色來輕易找到有性能問題的組件，并對(duì)它做針對(duì)性的優(yōu)化。

why-did-you-render

https://github.com/welldone-software/why-did-you-render,這個(gè)工具是由 Welldone Software 開發(fā)的，用來對(duì)組件重復(fù)渲染給出反饋。

它會(huì)對(duì)組件的 props 做 diff，如果組件重新渲染了，但是 props 并沒改變，它會(huì)在命令行提醒你 props 并沒有變化。

重復(fù)渲染在小型應(yīng)用中影響可能不大，但是在大型項(xiàng)目中將肯定會(huì)有影響。

這個(gè)工具嵌入到了 React 組件的生命周期中，所以他能在組件重新渲染時(shí)比對(duì) props 是否變化。

使用方法很簡(jiǎn)單，先安裝

npm install @welldone-software/why-did-you-render --save 

然后注冊(cè)一次：

whyDidYouRender(React, { 
  trackAllPureComponents: true 
}); 

然后對(duì) class component：

class Counter extends React.Component { 
  static whyDidYouRender = true; 
  render() { 
   //... 
  } 
} 

對(duì)函數(shù)組件：

function Counter() { 
  return( 
   // ... 
  ) 
} 
Counter.whyDidYouRender = true; 

下面是一個(gè)完整的例子，每次 setState 時(shí)候，style={{ width: "100%" }} 都是一個(gè)新的值，所以會(huì)觸發(fā)比對(duì)。

import React from "react"; 
import "./styles.css"; 
const whyDidYouRender = require("@welldone-software/why-did-you-render"); 
whyDidYouRender(React, { 
  trackAllPureComponents: true 
}); 
export default class App extends React.Component { 
  constructor() { 
    super(); 
    this.state = { 
      count: 1 
    }; 
  } 
  render() { 
    return ( 
      <div className="App"> 
        <button onClick={() => this.setState({ count: this.state.count + 1 })}> 
          add 
        </button> 
        <p>{this.state.count}</p> 
        <Comp style={{ width: "100%" }} /> 
      </div> 
    ); 
  } 
} 
function Comp(props) { 
  return <div>100</div>; 
} 
Comp.whyDidYouRender = true; 

前往 Code SandBox 測(cè)試

https://codesandbox.io/s/distracted-architecture-t9ih2?file=/src/App.js。

Performance timeline (Browser profiling)

這個(gè)工具是 Chrome 自帶的調(diào)試工具，在 Performance 一欄中。

它可以非常有效地查看嚴(yán)重重復(fù)渲染的組件，它也可以很方便地查看 UI 不必要的更新及其出現(xiàn)的頻次。

在使用工具之前，先以開發(fā)模式把你的 React app 啟動(dòng)起來。

然后，打開開發(fā)者工具，切換到 Performance 面板。

點(diǎn)擊中間的圓點(diǎn)或者用快捷鍵 command + e，開發(fā)者工具就開始錄制了，然后你可以在你的應(yīng)用中做一些交互動(dòng)作。

建議錄制時(shí)間在 20 秒以上，時(shí)間到了之后，點(diǎn)擊中間的 stop，或者左上角紅點(diǎn)。

然后我們就可以看到時(shí)間線了。

我們可以滑動(dòng)選擇一片區(qū)域，然后通過 W 放大或者通過 S 縮小。選中一片區(qū)域，通過 W 鍵一直放大。

每個(gè)橙色的條代表一個(gè)執(zhí)行過程，在這個(gè)條中你可以看到組件名、組件執(zhí)行的階段、以及執(zhí)行時(shí)間。在上面這張圖片中，App 的執(zhí)行階段是 update 階段，這表示 App 組件這段時(shí)間是在執(zhí)行更新操作，執(zhí)行所耗費(fèi)的時(shí)間是 1.71 ms。

組件每次渲染的時(shí)候一個(gè)新的黃條就會(huì)生成，如果一個(gè)組件多次渲染，通過這個(gè) Timings 圖表可以讓你更容易追因。每個(gè)黃條的長度表示組件的執(zhí)行時(shí)間，黃條越長，執(zhí)行時(shí)間也越長。你可以使用這個(gè)工具來診斷頁面。