這篇文章主要講解了“有哪些React性能優(yōu)化工具”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“有哪些React性能優(yōu)化工具”吧！

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為太子河企業(yè)提供專業(yè)的網(wǎng)站制作、網(wǎng)站設(shè)計(jì)，太子河網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

 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';  ...     

id 用來(lái)標(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í)長(zhǎng)

• 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è)工具用來(lái)檢測(cè)組件重復(fù)渲染非常有效。他可以用不同的顏色來(lái)標(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    紅色 - 高頻次更新

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

why-did-you-render

https://github.com/welldone-software/why-did-you-render,這個(gè)工具是由 Welldone  Software 開發(fā)的，用來(lái)對(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 (                 this.setState({ count: this.state.count + 1 })}>           add                  
{this.state.count}