21个提高React开发效率的工具

以往很多好评文章都归类过，也整理了很多自己的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。为了保证更好的可读性，本文采用意译而非直译。以下工具的重要性与顺序无关。1.WebpackBundleAnalyzer你有没有想过你的应用程序代码的哪些包或哪些部分占了总大小？WebpackBundleAnalyzer可以帮我们分析。WebpackBundleAnalyzer创建一个实时服务器并提供依赖包的交互式树图可视化。通过这个工具包，你可以看到渲染文件的位置、gzip大小、解析后的大小，以及父子之间的细节。这个工具的好处是你可以根据你看到的来优化你的React应用程序。Accepted是它生成的一张分析图：可以很明显的看到pdf包的大小在应用程序中占据的比例最大，在分析图中的占比也是最大的。对我们来说，所见即所得。但是，生成分析图的空间有限，你也可以通过一些有用的选项来更详细地查看它，比如generateStatsFile:true，并可选地生成一个静态HTML文件，可以保存在开发环境之外的某个地方，对于以后使用。2.React-ProtoReact-Proto是一款面向开发人员和设计人员的原型制作工具。这是一个桌面软件，因此您必须在使用前下载并安装该软件。这是一个如何使用它的简单演示：该应用程序允许您声明道具及其类型、在树中查看组件、导入背景图像、将它们定义为有状态或无状态、定义它们的父组件、放大/缩小，并将原型导出到新的或现有的项目中。该应用程序似乎更适合Mac用户，但它仍然可供Windows用户使用。用户界面完成后，可以选择导出到现有项目或新项目。如果您选择导出到现有项目并选择根目录，它会将它们导出到./src/components，如下所示：随着Reacthook的发布，这个应用程序需要更新以做更多的工作。当然，开源是这个应用程序的一个好处，因为它有可能成为未来开源存储库的热门列表。3.WhyDidYouRenderWhyDidYouRender猴子补丁React通知您有关可避免的重新渲染。Monkeypatch：这个名字起源于Zope框架。当人们修复Zope错误时，他们通常会在程序末尾添加一个更新部分。这些被称为“游击补丁”。后来guerilla逐渐写成gorllia（（猩猩），后来又写成monkey（猴子），所以monkeypatch的名字就这么莫名其妙的来了。monkeypatch主要有以下用途：替换方法，属性等在runtimewithoutmodifyingthefirst在三方代码的情况下，添加原来不支持的功能。在运行时给内存中的对象打个补丁，而不是在磁盘上的源代码中添加，这是非常有用的。它可以不仅可以指导我们修复项目的性能，还可以帮助您了解React。它是如何工作的。而且，当您更好地了解React的工作原理时，您将成为更好的React开发人员。通过声明一个额外的静态属性whyDidYouRender并将其值设置为true，可以将侦听器附加到任何自定义组件div{...props}/>constChild2=({children,...props})=>({children}