web前端6個(gè)實(shí)用React開發(fā)工具庫

1.Webpack Bundle Analyzer

有沒有想過你的應(yīng)用程序的哪些包或哪部分代碼所占總大小的多少?Webpack Bundle Analyzer可以幫助咱們分析。

Webpack Bundle Analyzer創(chuàng)建一個(gè)實(shí)時(shí)服務(wù)器，并提供依賴包交互式樹形圖可視化。通過這個(gè)工具包，可以看到所渲染文件的位置，gzip大小，解析大小以及所父子級(jí)之間詳情。

這個(gè)工具的好處是，可以根據(jù)你所看到來優(yōu)化你的React應(yīng)用。

2.React-Proto

React-Proto是一個(gè)面向開發(fā)人員和設(shè)計(jì)人員的原型工具。這是一個(gè)桌面軟件，所以在使用之前你必須下載并安裝這個(gè)軟件。

3.Why Did You Render

Why Did You Ren der猴子補(bǔ)丁React通知你有關(guān)可避免的重新渲染的信息。

猴子補(bǔ)丁:這個(gè)叫法起源于Zope框架，大家在修正Zope的Bug的時(shí)候經(jīng)常在程序后面追加更新部分，這些被稱作是“雜牌軍補(bǔ)丁(guerilla patch)”，后來guerilla就漸漸的寫成了gorllia((猩猩)，再后來就寫了monkey(猴子)，所以猴子補(bǔ)丁的叫法是這么莫名其妙的得來的。

猴子補(bǔ)丁主要有以下幾個(gè)用處：

在運(yùn)行時(shí)替換方法、屬性等

在不修改第三方代碼的情況下增加原來不支持的功能

在運(yùn)行時(shí)為內(nèi)存中的對(duì)象增加patch而不是在磁盤的源代碼中增加

4.Create React App

大家都知道，Create React App是創(chuàng)建React項(xiàng)目的最快方式（開箱即用）。

還有什么比 npxcreate-react-app

咱們還有些人可能不知道的是如何使用CRA創(chuàng)建TypeScript項(xiàng)目，這個(gè)也很簡單，只需要在末尾添加--typescript 即可：

npxcreate-react-app

這樣可以省去手動(dòng)將TypeScript添加到CRA創(chuàng)建項(xiàng)目中的麻煩。

5.React Lifecycle Visualizer

React Lifecycle Visualizer是一個(gè)npm包，用于跟蹤和可視化任意React組件的生命周期方法。

6.Guppy

Guppy是React的一個(gè)友好且免費(fèi)的應(yīng)用程序管理器和任務(wù)運(yùn)行器，它在桌面上運(yùn)行且跨平臺(tái)的，你可以放心用。

它為開發(fā)人員經(jīng)常面臨的許多典型任務(wù)(如創(chuàng)建新項(xiàng)目、執(zhí)行任務(wù)和管理依賴項(xiàng))提供了友好的圖形用戶界面。