推薦幾個 React 性能優化工具

作者：云影sky 2020-06-22 07:30:00

Profiler 是 React 中的一個組件，由 B. Vaughn 開發，它可以測量 React 應用渲染的頻率和渲染所花費的時間資源。Profiler 提供一個函數屬性 onRender，當組件 mount 或者 update 的時候，這個函數會接受到一些時間指標。

Profiler

Code SandBox

可以前往

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

Profiler 是 React 中的一個組件，由 B. Vaughn 開發，它可以測量 React 應用渲染的頻率和渲染所花費的時間資源。Profiler 提供一個函數屬性 onRender，當組件 mount 或者 update 的時候，這個函數會接受到一些時間指標。用這些時間指標你就可以發現效率低下的代碼了。

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

id 用來標識對應的 Profiler 組件，onRender 函數會在組件 mount 或者 update 的時候執行，它的參數結構如下：

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

id 組件 id;
phase 執行階段，mount 或者 update;
actualDuration Profiler 和子組件渲染當前的更新所花費的時間，這個值在首次 mount 的時候比 update 階段的值大;
baseDuration 子組件最近一次渲染所持續的時長
startTime 開始渲染當前的更新的時間戳
commitTime React 提交當前更新的時間戳

這些數據可以幫助我們分析組件運行的效率，找到性能瓶頸。

React Developer tools

React Developer tools 是 React 官方團隊發布的一個瀏覽器插件，功能十分強大。我要介紹的是 Highlight Update 這個功能。這個工具用來檢測組件重復渲染非常有效。他可以用不同的顏色來標識組件的邊框，顏色越黃表示這個組件重復渲染的次數越多。

如果你有一個組件樹像下面這樣：

如果 Main 組件重復渲染了，那么封裝 Counter 和 Count 組件的邊界就會出現一個邊框表示重復渲染。

我們激活這個特性之后,在 ReactJS 官網開啟關閉右側的菜單，會出現邊框提示：

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

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

|    綠色 - 低頻次更新 
|    藍色 - 一般頻次更新 
v    紅色 - 高頻次更新

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

why-did-you-render

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

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

重復渲染在小型應用中影響可能不大，但是在大型項目中將肯定會有影響。

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

使用方法很簡單，先安裝

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

然后注冊一次：

whyDidYouRender(React, { 
  trackAllPureComponents: true 
});

然后對 class component：

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

對函數組件：

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

下面是一個完整的例子，每次 setState 時候，style={{ width: "100%" }} 都是一個新的值，所以會觸發比對。

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;