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ù)和管理依賴項)提供了友好的圖形用戶界面。