2020年React开发人员的22个惊人工具

众所周知，React是一个用于构建出色用户界面的JavaScript库。然而，并不是每个人都在使用相同的工具，或者知道它们可以用来让React开发体验更有趣。如果你没有使用过React，或者有朋友可能对使用React感兴趣，当他们问你为什么使用React库时你会怎么说？除了告诉他们React有多棒（应该是第一件事）之外，我还想提到开源社区创建的工具有助于将体验提升到一个全新的水平。以下是22种可用于在2020年构建React应用程序的工具（此列表按重要性排序）。1.WebpackBundleAnalyzer有没有想过应用程序的哪些包或部分占用了所有空间？好吧，您可以使用WebpackBundleAnalyzer找到答案，这将帮助您识别占用最多空间的输出文件。它将创建一个实时服务器并为您提供一个显示包内容的交互式树视图。使用此工具，您可以查看渲染文件的位置、压缩后的大小、解析后的大小以及父/子文件。你可以根据你所看到的来优化你的React应用程序！下面是它的截图：从上图中我们可以清楚地看到pdf包在应用程序中占用了最多的空间，但这也是占用屏幕最大空间的。这非常有用。虽然屏幕截图很少，但您还可以使用有用的选项（如generateStatsFile:true）更详细地查看它，并且可以选择生成一个静态HTML文件以保存在开发环境之外的某个地方以供以后使用。2.React-ProtoReact-Proto是一款面向开发人员和设计人员的原型设计工具。它是桌面软件，因此您必须在使用前下载并安装该软件。这是一个使用该软件的示例：该应用程序允许您声明道具及其类型，在树视图中查看您的组件，导入背景图像，将它们定义为有状态或无状态，将它们的父组件定义为任何东西，放大/缩小，并将您的原型导出到新的或现有的项目中。该应用程序似乎更适合Mac用户，但对于Windows用户仍然可以正常工作。完成用户界面映射后，您可以选择导出到现有项目或新项目。如果您选择导出到现有项目并选择根目录，它会将它们导出到./src/components，如下所示：这是我们在示例中使用的组件示例：React-Proto在GitHub上可用2,000stars.不过就我个人而言，我认为该应用程序需要更新和做更多的工作，尤其是随着ReactHooks的发布。3.WhyDidYouRenderWhyDidYouRender让React通知你可以避免的重新渲染。这非常有用，不仅可以指导您完成项目的性能修复，还可以帮助您了解React的工作原理。而且，当你更好地理解React的工作原理时，它会让你成为更好的React开发人员。您可以通过声明一个值为true的附加静态属性whyDidYouRender将侦听器附加到任何自定义组件：importReactfrom'react'importButtonfrom'@material-ui/core/Button'constChild=(props)=>constChild2=({children,...props})=>({children}