1.Webpack Bundle Analyzer
有沒有想過你的應(yīng)用程序的哪些包或哪部分代碼所占總大小的多少?Webpack Bundle Analyzer可以幫助咱們分析。
Webpack Bundle Analyzer創(chuàng)建一個實時服務(wù)器,并提供依賴包交互式樹形圖可視化。通過這個工具包,可以看到所渲染文件的位置,gzip大小,解析大小以及所父子級之間詳情。
這個工具的好處是,可以根據(jù)你所看到來優(yōu)化你的React應(yīng)用。
2.React-Proto
React-Proto是一個面向開發(fā)人員和設(shè)計人員的原型工具。這是一個桌面軟件,所以在使用之前你必須下載并安裝這個軟件。
3.Why Did You Render
Why Did You Ren der猴子補丁React通知你有關(guān)可避免的重新渲染的信息。
猴子補丁:這個叫法起源于Zope框架,大家在修正Zope的Bug的時候經(jīng)常在程序后面追加更新部分,這些被稱作是“雜牌軍補丁(guerilla patch)”,后來guerilla就漸漸的寫成了gorllia((猩猩),再后來就寫了monkey(猴子),所以猴子補丁的叫法是這么莫名其妙的得來的。
猴子補丁主要有以下幾個用處:
在運行時替換方法、屬性等
在不修改第三方代碼的情況下增加原來不支持的功能
在運行時為內(nèi)存中的對象增加patch而不是在磁盤的源代碼中增加
4.Create React App
大家都知道,Create React App是創(chuàng)建React項目的最快方式(開箱即用)。
還有什么比 npxcreate-react-app
咱們還有些人可能不知道的是如何使用CRA創(chuàng)建TypeScript項目,這個也很簡單,只需要在末尾添加--typescript 即可:
npxcreate-react-app
這樣可以省去手動將TypeScript添加到CRA創(chuàng)建項目中的麻煩。
5.React Lifecycle Visualizer
React Lifecycle Visualizer是一個npm包,用于跟蹤和可視化任意React組件的生命周期方法。
6.Guppy
Guppy是React的一個友好且免費的應(yīng)用程序管理器和任務(wù)運行器,它在桌面上運行且跨平臺的,你可以放心用。
它為開發(fā)人員經(jīng)常面臨的許多典型任務(wù)(如創(chuàng)建新項目、執(zhí)行任務(wù)和管理依賴項)提供了友好的圖形用戶界面。