react 流程图框架_21个让React 开发更高效更有趣的工具

作者：jsmanifest译者：前端小智来源：medium.

为了保证的可读性，本文采用意译而非直译。

下列工具中的重要性与排序无关。

1.Webpack Bundle Analyzer

有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? Webpack Bundle Analyzer(https://github.com/webpack-contrib/webpack-bundle-analyzer)可以帮助咱们分析。

Webpack Bundle Analyzer创建一个实时服务器，并提供依赖包交互式树形图可视化。通过这个工具包，可以看到所渲染文件的位置，gzip大小，解析大小以及所父子级之间详情。

这个工具的好处是，可以根据你所看到来优化你的React应用。

收下是它生成的一个分析图：

可以清楚地看到pdf包大小占用应用程序是最多的，同时也是占用分析图片最大比例，这对于咱们来说是所看即所得效果。

然而，生成分析图空间有限，你还可以传递一些有用的选项来更详细地查看它，比如generateStatsFile: true，还可以选择生成一个静态HTML文件，可以将其保存在开发环境之外的某个地方，以供以后使用。

2. React-Proto

React-Proto (https://github.com/React-Proto/react-proto)是一个面向开发人员和设计人员的原型工具。这是一个桌面软件，所以在使用之前你必须下载并安装这个软件。

以下是使用方式一个简单演示：

该应用程序允许你声明props及其types，在树中查看组件，导入背景图像，将它们定义为有状态或无状态，定义其父组件将是什么，放大/缩小，以及将原型导出到新的或现有项目。

该应用程序似乎更适合Mac用户，但它仍适用于Windows用户。

完成用户界面后，可以选择导出到现有项目或新项目。如果你选择导出到现有项目并选择根目录，它会将它们导出到./src/components，如下所示：

随着React hook的发布，这个应用程序需要更新做更多的工作。当然，开源是这个应用程序的好处，因为它使它有可能成为未来流行的开源存储库列表。

3. Why Did You Render

Why Did You Render(https://github.com/welldone-software/why-did-you-render) 猴子补丁React通知你有关可避免的重新渲染的信息。

猴子补丁: 这个叫法起源于Zope框架，大家在修正Zope的Bug的时候经常在程序后面追加更新部分，这些被称作是“杂牌军补丁(guerilla patch)”，后来guerilla就渐渐的写成了gorllia((猩猩)，再后来就写了monkey(猴子)，所以猴子补丁的叫法是这么莫名其妙的得来的。

猴子补丁主要有以下几个用处：

• 在运行时替换方法、属性等
• 在不修改第三方代码的情况下增加原来不支持的功能
• 在运行时为内存中的对象增加patch而不是在磁盘的源代码中增加

这非常有用，不仅可以指导咱们修复项目的性能，还可以帮助你理解React是如何工作的。而且，当你更好地理解React的工作原理时ÿ