React开发人员在2019年应该掌握的22个神奇工具

众所周知，React是一个用于构建出色用户界面的JavaScript库。然而，并不是每个人都使用相同的工具或了解所有有助于使React开发体验更有趣和主动的有用工具。如果你还没有用过React，或者你有对它感兴趣的朋友，当他们问你为什么选择这个库时，你应该怎么回答？除了告诉他们这个库有多棒（这应该是第一个要说的），我还想提一下，开源社区创建的这些工具有助于将开发体验提升到一个全新的、令人兴奋的水平。以下是22种可用于在2019年构建React应用程序的工具（列表不按重要性排序）。1.webpack-bundle-analyzer你有没有想过你的应用程序的哪些包或哪些部分占用了所有空间？好的，我们可以使用webpack-bundle-analyzer查看一下，它将帮助我们识别占用最多空间的输出文件。它将创建一个实时服务器并为我们提供捆绑包内容的交互式可视化树状图。在这个工具包的帮助下，我们可以看到显示的文件在哪里、压缩后的大小、解析后的大小以及它们属于哪个父子。有什么好处？我们可以根据我们看到的插图来优化我们的React应用程序！这是它的截图：我们可以清楚地看到pdf包在应用程序中占用了最多的空间。它还占据了最大的屏幕，这对我们所有人都有用。但是，屏幕截图质量很小。我们还可以输入有用的选项以查看更多详细信息，例如generateStatsFile:true，并可选择生成一个静态HTML文件以保存在开发环境之外的某个地方供以后使用。2.React-ProtoReact-Proto是一款面向开发人员和设计人员的原型制作工具。这是一个桌面软件，所以在使用之前，我们需要下载并安装该软件。这是工具页面样式：该应用程序允许我们声明属性及其类型、在树视图中查看组件、导入背景图像、将其定义为有状态或无状态、定义其父组件、放大/缩小以及导出原型到一个新的或现有的项目。该应用程序似乎更适合Mac用户，但它也支持Windows。完成UI映射后，我们可以选择导出到现有项目或新项目。如果您选择导出到现有项目并选择根目录，它们将导出到./src/components，如下所示：下面是一个示例，我们使用示例中的组件之一：React-ProtoGot2,000onGitHub星星。但是，我认为应用程序仍然需要更新，还有很多工作要做，尤其是ReactHooks的发布。除非我们有可见的背景图像，否则我们无法缩小。也就是说，如果导入背景图片，缩小，再删除图片，则图片无法放大，因为操作按钮已经变灰，无法使用。放大的唯一方法是重新导入背景图像，放大后背景图像被删除。这个缺陷改变了我对这个工具的看法，但由于我在其他地方看不到这个开源文件，所以我将它添加到列表中。当然，成为开源软件对这个应用程序来说是一件好事，因为它有可能成为未来开源存储库的流行列表。3.WhyDidYouRenderWhyDidYouRendermonkeypatchReact告诉我们可以避免重新渲染。这不仅非常有用，还可以指导我们对项目进行性能修复，并帮助我们了解React的工作原理。此外，当我们更好地理解React的工作原理时，它也使我们成为更好的React开发人员。MonkeyPatch：这个名字起源于Zope框架。在纠正Zope错误时，人们通常会在程序末尾添加一个更新部分。这些被称为“游击补丁”。后来guerilla逐渐写成gorllia（猩猩），后来又写成monkey（猴子），猴子补丁的名字就这么莫名其妙的来了。我们可以通过声明一个额外的静态属性whyDidYouRender并将其值设置为true来将监听器附加到任何自定义组件：importReactfrom'react'importButtonfrom'@material-ui/core/Button'constChild=(props)=>constChild2=({children,...props})=>({children}