您好,登錄后才能下訂單哦!
這篇文章主要講解了“有哪些React性能優(yōu)化工具”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“有哪些React性能優(yōu)化工具”吧!
Profiler
Code SandBox
可以前往
https://codesandbox.io/s/react-profiler-example-o75nc?fontsize=14&hidenavigation=1&theme=dark 在線編輯效果。
Profiler 是 React 中的一個組件,由 B. Vaughn 開發(fā),它可以測量 React 應(yīng)用渲染的頻率和渲染所花費(fèi)的時間資源。Profiler 提供一個函數(shù)屬性 onRender,當(dāng)組件 mount 或者 update 的時候,這個函數(shù)會接受到一些時間指標(biāo)。用這些時間指標(biāo)你就可以發(fā)現(xiàn)效率低下的代碼了。
import React, { Profiler } from 'react'; ... <Profiler id="Counter1" onRender={this.callback1(this)}> <Counter1 /> </Profiler>
id 用來標(biāo)識對應(yīng)的 Profiler 組件,onRender 函數(shù)會在組件 mount 或者 update 的時候執(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)的時間,這個值在首次 mount 的時候比 update 階段的值大;
baseDuration 子組件最近一次渲染所持續(xù)的時長
startTime 開始渲染當(dāng)前的更新的時間戳
commitTime React 提交當(dāng)前更新的時間戳
這些數(shù)據(jù)可以幫助我們分析組件運(yùn)行的效率,找到性能瓶頸。
React Developer tools
React Developer tools 是 React 官方團(tuán)隊(duì)發(fā)布的一個瀏覽器插件,功能十分強(qiáng)大。我要介紹的是 Highlight Update 這個功能。這個工具用來檢測組件重復(fù)渲染非常有效。他可以用不同的顏色來標(biāo)識組件的邊框,顏色越黃表示這個組件重復(fù)渲染的次數(shù)越多。
如果你有一個組件樹像下面這樣:
如果 Main 組件重復(fù)渲染了,那么封裝 Counter 和 Count 組件的邊界就會出現(xiàn)一個邊框表示重復(fù)渲染。
我們激活這個特性之后,在 ReactJS 官網(wǎng)開啟關(guān)閉右側(cè)的菜單,會出現(xiàn)邊框提示:
如何激活這個特性呢?找到調(diào)試工具的 Components 一欄,點(diǎn)擊右上角的小齒輪,再選中彈窗中的 Highlight updates when components render.
邊框的類型取決于重復(fù)渲染的程度,重復(fù)渲染越多,顏色越深。
| 綠色 - 低頻次更新 | 藍(lán)色 - 一般頻次更新 v 紅色 - 高頻次更新
通過使用這個工具,我們可以通過邊框顏色來輕易找到有性能問題的組件,并對它做針對性的優(yōu)化。
why-did-you-render
https://github.com/welldone-software/why-did-you-render,這個工具是由 Welldone Software 開發(fā)的,用來對組件重復(fù)渲染給出反饋。
它會對組件的 props 做 diff,如果組件重新渲染了,但是 props 并沒改變,它會在命令行提醒你 props 并沒有變化。
重復(fù)渲染在小型應(yīng)用中影響可能不大,但是在大型項(xiàng)目中將肯定會有影響。
這個工具嵌入到了 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() { //... } }
對函數(shù)組件:
function Counter() { return( // ... ) } Counter.whyDidYouRender = true;
下面是一個完整的例子,每次 setState 時候,style={{ width: "100%" }} 都是一個新的值,所以會觸發(fā)比對。
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 測試
https://codesandbox.io/s/distracted-architecture-t9ih3?file=/src/App.js。
Performance timeline (Browser profiling)
這個工具是 Chrome 自帶的調(diào)試工具,在 Performance 一欄中。
它可以非常有效地查看嚴(yán)重重復(fù)渲染的組件,它也可以很方便地查看 UI 不必要的更新及其出現(xiàn)的頻次。
在使用工具之前,先以開發(fā)模式把你的 React app 啟動起來。
然后,打開開發(fā)者工具,切換到 Performance 面板。
點(diǎn)擊中間的圓點(diǎn)或者用快捷鍵 command + e,開發(fā)者工具就開始錄制了,然后你可以在你的應(yīng)用中做一些交互動作。
建議錄制時間在 20 秒以上,時間到了之后,點(diǎn)擊中間的 stop,或者左上角紅點(diǎn)。
然后我們就可以看到時間線了。
我們可以滑動選擇一片區(qū)域,然后通過 W 放大或者通過 S 縮小。選中一片區(qū)域,通過 W 鍵一直放大。
每個橙色的條代表一個執(zhí)行過程,在這個條中你可以看到組件名、組件執(zhí)行的階段、以及執(zhí)行時間。在上面這張圖片中,App 的執(zhí)行階段是 update 階段,這表示 App 組件這段時間是在執(zhí)行更新操作,執(zhí)行所耗費(fèi)的時間是 1.71 ms。
組件每次渲染的時候一個新的黃條就會生成,如果一個組件多次渲染,通過這個 Timings 圖表可以讓你更容易追因。每個黃條的長度表示組件的執(zhí)行時間,黃條越長,執(zhí)行時間也越長。你可以使用這個工具來診斷頁面。
感謝各位的閱讀,以上就是“有哪些React性能優(yōu)化工具”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對有哪些React性能優(yōu)化工具這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。