收集！React开发者的22个超级工具

)Child2.whyDidYouRender=trueconstApp=()=>{const[state,setState]=React.useState({})return()}exportdefaultApp只有做完这些后，控制台才能当您收到非常烦人的警告时得到通知：不要将这些消息视为错误。认为这是一件好事。使用这些烦人的信息，您可以修复那些浪费的补丁，最终这些烦人的信息将离开您！4.创建ReactApphttps://github.com/facebook/create-react-app众所周知，CreateReactApp是动手开发React项目（具有工具箱中的现代功能）的最快方法。有什么比npxcreate-react-app更简单的吗？Medium上的所有教程都使用create-react-app来创建React界面，因为它速度很快。有些人可能不知道如何使用CRA创建TypeScript项目。只需要在最后加上--typescript:npxcreate-react-app--typescript就可以省去你在CRA项目中手动添加TypeScript的麻烦。5.ReactLifecycleVisualizerhttps://github.com/Oblosys/react-lifecycle-visualizerReactLifecycleVisualizer是一个npm包，用于跟踪和观察任何React组件的生命周期方法。类似于WhyDidYouRender，你可以随意选择任何组件来显示它的生命周期观察者：false,}componentDidMount(){this.props.onMount()}render(){return

TracedComponent

}}constEnhancedTracedComponent=traceLifecycle(TracedComponent)constApp=()=>()这将使观察者显示如下：但是，缺点之一是目前仅对类组件有用，因此尚不支持Hooks。（问题是，它们能被认为是生命周期吗？）6.Guppyhttps://github.com/joshwcomeau/guppyGuppy是一款友好且免费的应用程序管理器和任务管理工具，专为在桌面上运行的React而设计。该应用程序似乎优先考虑使用React开发程序的新手。当然，它也可能对高级开发人员有用。它为React开发人员经常面临的许多典型任务提供了友好的图形用户界面，例如创建新项目、任务执行和依赖管理。2018年8月加入Windows系统支持，跨平台是肯定的。Guppy的界面是这样的：7.react-testing-libraryhttps://github.com/testing-library/react-testing-library作者一直很喜欢react-testing-library，因为在写单元测试的时候，它总是感觉不错。这个包提供了ReactDOM测试实用程序，促进了良好的测试实践。这个解决方案的目标是解决测试实现细节的问题，但是它测试了React组件的输入/输出，就好像用户可以看到它一样。测试实现细节并不是确保您的应用程序按预期工作的有效方法。当然，更让人有信心的是如何获取组件需要的数据，使用什么样的排序方式等等。但是，如果需要更改实现以针对不同的数据库，那么单元测试就会失败，因为它们是耦合逻辑的实现细节。这就是react-testing-library解决的问题，因为理想情况下，开发人员只希望用户界面能够正常工作并正确显示，直到最后。只要输出仍然是预期的，您如何将数据获取到这些组件并不重要。下面是有关如何使用该库进行测试的示例代码：//Hoisthelperfunctions(butnotvars)toreusebetweentestcasesconstrenderComponent=({count})=>render(,)it('rendersinitialcount',async()=>{//Rendernewinstanceineeverytesttopreventleakingstateconst{getByText}=renderComponent({count:5})awaitwaitForElement(()=>getByText(/clicked5times/i))})it('incrementscount',async()=>{//Rendernewinstanceineeverytesttopreventleakingstateconst{getByText}=renderComponent({count:5})fireEvent.click(getByText('+1'))awaitwaitForElement(()=>getByText(/clicked6times/i))})8.反应开发者工具https://github.com/facebook/react-devtoolsReactDeveloperTools是一个允许在Google和Firefox浏览器devtools中检测React组件类的扩展。这是此列表中最广为人知的扩展工具，并且它仍然是React开发人员调试其应用程序最有用的工具之一。9.Bithttps://bit.dev/Bit是使用React组件库（如Material-UI或SemanticUI）的一个很好的替代方案。Bit允许用户探索数以千计的开源组件并使用它们来构建自己的项目。每个人都可以使用许多不同的React组件，包括选项卡、按钮、图表、表格、导航栏、下拉菜单、加载列表、日期选择器、面包屑、图标、布局等等。这些是由React开发人员（如读者和作者）上传的。但是，有一些实用程序可用，例如格式化日期之间的距离。10.Storybookhttps://storybook.js.org/如果你还不知道Storybook，但想用更简单的方式构建UI组件，我强烈推荐开始使用它。该工具启动一个动态开发服务器，由开箱即用的热重载支持，以实时单独开发React组件。另一个好处是能够使用现有的开源插件，将开发体验提升到一个全新的水平。例如，在开发用于生产用途的React组件时，StorybookREADME包使创建README成为可能。作为文档页面就足够了：11.ReactSighthttps://www.reactsight.com/你有没有想过应用程序将如何在流程图中呈现？然后，ReactSight会呈现整个程序的动态组件层次树，将React程序可视化。它还支持react-router、Redux和ReactFiber。使用此工具，可以将鼠标悬停在链接到与其直接相关的组件的节点上。如果结果显示有问题，可能需要在地址栏输入chrome:extensions，找到ReactSight框，点击允许访问文件URLs开关，如下图：12.ReactCosmoshttps://github.com/react-cosmos/react-cosmosReactCosmos是一种开发工具，旨在创建可重用的React组件。它扫描项目中的组件，使开发人员能够：1.在道具、环境和状态的任意组合下修复组件。2.模拟每个外部依赖项（例如，应用程序接口响应、localStorage等）3.在与运行实例交互时查看应用程序状态的实时演变。13.CodeSandbox这无疑是让React开发人员放手并在不到眨眼的时间内完成工作的优秀工具之一。该工具称为CodeSandbox，它是一个在线编辑器，可让开发人员创建Web应用程序，从原型到部署——全部来自Web！CodeSandbox最初只在早期阶段支持React，但现在已扩展到支持Vue和Angular等。该库提供了额外的入门模板。它还支持通过创建相同的静态站点生成器（例如Gatsby或Next.js）来启动您的下一个ReactWeb项目。说到Codesandbox，有太多好话要说。一方面，它非常活跃。如果您需要探索人们为易于操作而构建的一些项目，这很容易，点击“探索”并获得一堆代码示例，这将有助于彻底改变下一个项目：一旦您开始编写项目，就开始了解您的内容会用到功能强大的VSCode编辑器。作者今天想把开发者在CodeSandbox中可以使用的所有特性都写下来，但似乎任务已经完成了。14.ReactBitshttps://vasanthk.gitbooks.io/react-bits/ReactBits是React模式、技术、技巧和窍门的集合，一切都写成在线课堂文档模式，从中你可以快速获得不同设计模式和技术、反模式、样式、用户体验(UX)变体以及其他有用的React相关材料，都在一个选项卡下。他们有一个拥有9,923颗星的GitHub存储库(https://github.com/vasanthk/react-bits)。有示例，包括prop委托等概念，处理不同情况下的各种用户体验的章节，甚至暴露了每个React开发人员都应该注意的一些陷阱。下面是其页面中的效果图。如左侧菜单栏所示，有很多信息：15.folderizehttps://marketplace.visualstudio.com/items?itemName=ee92.folderizefolderize是VSCode的一个扩展工具，刚刚发布不到一周。它允许用户将组件“文件”移动到组件“文件夹”结构中。React组件仍然是一个组件，只是转换为一个文件目录。例如，假设开发人员正在创建一个React组件，该组件使用文件作为props来显示有用的信息和元数据。元数据组件的逻辑占用了很多行，因此开发人员决定将其拆分成一个单独的文件。但是，一旦完成此操作，就会有两个相互关联的文件。所以。如果有这样的文件目录：开发人员可能希望将FileView.js和FileMetadata.js带入文件目录结构，就像Apples-特别是考虑添加更多相关文件，如FileScanner.js组件。这就是folderize为开发人员所做的，呈现的架构类似于：16.ReactStarterProjectshttps://www.javascriptstuff.com/react-starter-projects/这里有一个Reactstarterprojects是很好的列表，您可以在一页上看到所有内容。因此，如果您是那种可以一次从大量选择中找到有用内容的人，那么此工具适合您。一旦开发者看到自己喜欢并且好用的项目，就可以直接复制仓库，根据自己要发布的应用进行修改。但是并不是所有项目都可以通过复制仓库来使用，因为有些项目需要安装，会成为项目的依赖。这使更新更容易，也使项目保持清洁。它的页面如下所示：17.突出显示更新https://reactjs.org/docs/optimizing-performance.html这可能是任何开发人员在其研发工具箱中使用过的最重要的工具。HighlightUpdates是ReactDevTools的一个扩展，它可以看到页面的哪些组件被不必要地刷新：它有助于在开发页面时发现瓶颈，甚至使这个过程变得更容易，因为它们会将严重的刷新问题标记为橙色或红色。除非你只是想构建一个平庸的应用程序，否则为什么不把这么好的工具放在你的包里呢？18.ReactDiffViewerhttps://praneshravi.in/react-diff-viewer/ReactDiffViewer是由AsimpleandbeautifulviewerfortextdiffinstructionsmadewithDiffandReact开发的。它支持分屏视图、内联视图、worddiff命令、粗线等功能。如果开发人员试图将此功能嵌入记事本（如Boostnote）并对其进行自定义以更好地适应他们的应用程序，则此工具很有用（主题颜色、与故事书一起显示的文档等）。19.JS.coachhttps://js.coach/?collection=React我在寻找React相关资料时用得最多的网站是JS.coach。笔者还不清楚为什么这个宝藏站点没有被大家提及，但是我已经在这个页面上找到了我需要的一切。它快速而简单，不断更新，并且从不交付项目所需的内容。最棒的是，这个网站刚刚添加了ReactVR标签！20.AwesomeReacthttps://github.com/enaqx/awesome-reactGitHubAwesomeReact开源存储库是关于React的一个很棒的列表。我可能会忘记其他网站，只从这个网站学习React，你一定会找到大量有用的资源来构建强大的React应用程序！21.ProtonNativehttps://github.com/kusti8/proton-nativeProtonNative提供了一个React环境来构建跨平台的原生桌面应用程序。它是Electron的替代品，具有一些简洁的功能，包括：与ReactNative相同的语法。适用于现有的React库，例如Redux。跨平台。本机组件。没有更多的电子。与所有普通的Node.js包兼容。22.DevhintsReact.jsCheatsheethttps://devhints.io/react这是一个很棒的React备忘单。