1.WebpackBundleAnalyzer
有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少?WebpackBundleAnalyzer可以帮助咱们分析。
WebpackBundleAnalyzer创建一个实时服务器，并提供依赖包交互式树形图可视化。通过这个工具包，可以看到所渲染文件的位置，gzip大小，解析大小以及所父子级之间详情。
这个工具的好处是，可以根据你所看到来优化你的React应用。
2.React-Proto
React-Proto是一个面向开发人员和设计人员的原型工具。这是一个桌面软件，所以在使用之前你必须下载并安装这个软件。
3.WhyDidYouRender
WhyDidYouRender猴子补丁React通知你有关可避免的重新渲染的信息。
猴子补丁:这个叫法起源于Zope框架，大家在修正Zope的Bug的时候经常在程序后面追加更新部分，这些被称作是“杂牌军补丁(guerillapatch)”，后来guerilla就渐渐的写成了gorllia((猩猩)，再后来就写了monkey(猴子)，所以猴子补丁的叫法是这么莫名其妙的得来的。
猴子补丁主要有以下几个用处：
在运行时替换方法、属性等
在不修改第三方代码的情况下增加原来不支持的功能
在运行时为内存中的对象增加patch而不是在磁盘的源代码中增加
4.CreateReactApp
大家都知道，CreateReactApp是创建React项目的最快方式（开箱即用）。
还有什么比npxcreate-react-app更简单的呢
咱们还有些人可能不知道的是如何使用CRA创建Typescript项目，这个也很简单，只需要在末尾添加--typescript即可：
npxcreate-react-app—typescript
这样可以省去手动将Typescript添加到CRA创建项目中的麻烦。
5.ReactLifecycleVisualizer
ReactLifecycleVisualizer是一个npm包，用于跟踪和可视化任意React组件的生命周期方法。
6.Guppy
Guppy是React的一个友好且免费的应用程序管理器和任务运行器，它在桌面上运行且跨平台的，你可以放心用。
它为开发人员经常面临的许多典型任务(如创建新项目、执行任务和管理依赖项)提供了友好的图形用户界面。