React开发人员在2019年应该使用的22种神奇工具

)Child2.whyDidYouRender=trueconstApp=()=>{const[state,setState]=React.useState({})return()}exportdefaultApp只有这样做之后我们的控制台弹出一个令人难以置信的恼人警报：不要误会我的意思。让它成为一件好事。利用这些烦人的消息，这样我们就可以修复这些浪费的重新渲染，最终，这些烦人的消息将不再烦人。4.创建ReactApp每个人都知道创建ReactApp是开始开发React项目的最快方式（具有开箱即用的现代功能）。有什么比npxcreate-react-app更容易的呢？我在Medium上的教程使用create-react-app来构建React界面，因为它既快速又简单。我们中有些人可能不知道如何使用CRA创建TypeScript项目。我们所要做的就是在末尾添加typescript：npxcreate-react-app--typescript这将省去我们手动将TypeScript添加到CRA项目的麻烦。5.ReactLifecycleVisualizerReactLifecycleVisualizer是一个npm包，用于跟踪和可视化任何React组件的生命周期。与WhyDidYouRender类似，我们可以启用我们选择的任何组件来显示生命周期可视化工具：已加载：false,}componentDidMount(){this.props.onMount()}render(){return

TracedComponent

}}constEnhancedTracedComponent=traceLifecycle(TracedComponent)constApp=()=>()TracedComponent}}constEnhancedTracedComponent=traceLifecycle(TracedComponent)constApp=()=>()这样会渲染可视化器，如下图：但是，这样做有缺点，目前只针对类组件，Hooks还不被支持。（问题是，他们能做到吗？因为它是关于生命周期的。）6.GuppyGuppy是一个友好且免费的在桌面上运行的React应用程序管理器和任务运行器。他们似乎优先考虑React开发的新手。但是，它也可能对高级开发人员有用。它为React开发人员经常面临的许多典型任务提供了友好的GUI，例如：创建新项目、执行任务和管理依赖项。2018年8月添加了对Windows的支持，因此它肯定是跨平台的。Guppy长这样：7.react-testing-library写单元测试的时候，react-testing-library感觉很好用，所以一直喜欢用。这个包提供了鼓励良好测试实践的ReactDOM测试实用程序。该解决方案旨在解决测试实现细节的问题，就好像它们可以被用户看到一样，而不是测试React组件的输入/输出。测试实现细节并不是确保您的应用程序按预期工作的有效方法。当然，我们可以对如何获取组件所需的数据、使用某些方法等更有信心。但是，如果我们必须更改我们的实现以指向不同的数据库，那么单元测试将失败，因为它们是实现耦合逻辑的细节。这是react-testing-library解决的问题，因为在理想情况下，我们只希望我们的UI能够正常工作并最终正确呈现。我们如何获取这些组件的数据并不重要，只要它们仍然提供预期的输出即可。以下是我们如何使用该库进行测试的示例代码：//Hoisthelperfunctions(butnotvars)toreusebetweentestcasesconstrenderComponent=({count})=>render(,)it('rendersinitialcount',async()=>{//Rendernewinstanceineverytesttopreventleakingstateconst{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.ReactDeveloperToolsReactDeveloperTools是一个扩展，允许在Chrome和FirefoxDeveloperTools中查看React的组件层次结构。这是此列表中最常见的扩展，并且仍然是React开发人员可以用来调试应用程序的最有用的工具之一。9.Bit在使用Material-UI或SemanticUIReact等组件库时，Bit是一个很好的选择。Bit让我们可以探索数以千计的开源组件，并允许我们使用它们来构建项目。有大量不同的React组件可供任何人使用，包括选项卡、按钮、图表、表格、导航栏、下拉菜单、加载微调器、日期选择器、面包屑导航、图标、布局等等。这些是由像你和我这样的其他React开发人员上传的。但是，也有一些实用程序可用，例如格式化日期之间的距离。10.Storybook如果你还不知道Storybook并且希望能够更轻松地构建UI组件，那么我强烈建议你开始使用它。该工具启动了一个开箱即用的支持热重载的实时开发服务器，我们可以在其中独立并实时开发React组件。另一个很酷的事情是我们可以使用现有的开源插件将我们的开发体验提升到一个全新的水平。例如，使用StorybookREADME包，我们可以创建一个README文档，同时在同一页面上开发一个用于生产的React组件。这对于一个普通的文档页面来说已经足够了：11.ReactSight你有没有想过你的应用程序在流程图中是什么样子的？ReactSight允许您可视化您的React应用程序，借助整个应用程序实时组件层次结构树呈现。它还支持react-router、Redux和ReactFiber。使用此工具，您可以将鼠标悬停在节点上，它们是树中与它们直接相关的组件的链接。如果查看结果有困难，可以在地址栏输入chrome:extensions，找到ReactSight工具箱，点击AllowaccesstofileURLs开关，如下图：12.ReactCosmosReactCosmos用于创建A可重用React组件的开发工具。它扫描项目中的组件并使我们能够：使用props、上下文和状态的任意组合渲染组件。模拟每个外部依赖项（例如：API响应、localStorage等）。当您与正在运行的实例交互时，实时查看应用程序的状态演变。13.CodeSandbox毫无疑问，这是最好的工具之一，可以让我们比眨眼还快（好吧，也许没那么快）上手React。这个名为CodeSandbox的工具是一个在线编辑器，可以让我们从原型创建Web应用程序以进行部署——所有这些都来自网站。在早期阶段，CodeSandbox最初只支持React，但现在已经扩展到包括Vue和Angular等库的其他入门模板。他们还支持通过使用流行的静态站点生成器（如Gateby或Next.js）创建项目来启动你的下一个ReactWeb项目。谈到CodeSandbox，有很多值得谈论的好东西。首先，它非常活跃。如果您需要探索人们为方便起见而正在构建的一些项目，只需单击探索，您就可以访问一堆代码示例，以帮助您更新下一个项目：一旦开始编辑项目，您就会意识到那，要用到的其实是一个强大的VSCode编辑器。我很想写一篇关于今天CodeSandbox中可用内容的完整文章，但看起来这项工作已经完成。14.ReactBitsReactBits是React模式、技术、技巧和窍门的集合，全部以类似于在线课程文档的格式编写，您可以在其中快速访问不同的设计模式和技术、反模式、样式、UX变体和其他有用的React相关材料，都在同一个选项卡上。他们有一个GitHub存储库，目前有9923颗星。一些示例包括属性代理、在不同场景中处理不同UX的组合等概念，甚至暴露了每个React开发人员都应该知道的一些陷阱。这就是出现在他们的页面上的感觉。正如你在左侧菜单中看到的，有很多信息：15.folderizefolderize是一个发布不到7天的VSCode扩展。它允许我们将组件文件转换为组件文件夹结构。我们的React组件仍然是一个组件，它只是现在被转换成一个目录。例如，假设我们正在创建一个React组件，它将文件作为props来显示有用的信息，例如它们的元数据。元数据组件的逻辑有很多行，所以我们决定将它拆分成一个单独的文件。然而，当我们决定这样做时，我们有两个相互关联的文件。因此，如果我们有一个这样的目录：我们可能希望将FileView.js和FileMetadata.js抽象到一个目录结构中，就像Apple所做的那样——尤其是当我们考虑使用FileScanner.js等添加更多文件相关组件时。这就是folderize为我们所做的，因此他们可以获得类似于下面的结构：16.React启动项目这是一个很棒的React启动项目列表，我们可以在一页上看到所有项目。因此，如果我们是那种认为一次拥有所有选项的巨大列表很有用的人，那么这个列表适合我们。一旦我们看到我们喜欢的启动项目，我们就可以简单地克隆存储库并根据我们要开发的应用程序进行一些修改。但是，并非所有库都旨在通过克隆存储库来使用，因为其中一些库将被安装，这将成为我们项目中的依赖项。这使得获取更新和保持项目清洁变得更加容易。该页面如下所示：17.突出显示更新可以说是任何人在其开发工具包中都会拥有的最重要的工具。突出显示更新是ReactDevTools扩展的一项功能，它允许我们查看页面中的哪些组件不必要地重新渲染：它帮助我们在开发页面时看到瓶颈，并且因为它们以橙色或红色突出显示严重的重新渲染问题有阴影，因此更容易发现它们。除非我们的目标是构建一个平庸的应用程序，否则为什么不试试我们身边的好东西呢？18.ReactDiffViewerReactDiffViewer是一个使用Diff和React构建的简单而漂亮的文本差异查看器。它支持以下功能：拆分视图、内联视图、单词差异、行突出显示等等。如果我们想将此功能嵌入我们的记事本（如Boostnote）并自定义它以更好地适合我们的应用程序（主题颜色、文档和故事书演示文本的组合等），这将很有用。19.JS.coach我用来查找React相关内容的最常用网站是JS.coach。现在，我不确定为什么没有多少人提到这个网站，但是，仅仅从这个页面，我就找到了我需要的一切。它既快速又简单，并且不断更新以始终为我的所有项目提供理想的结果。最近，他们添加了一个ReactVR选项卡，太棒了！20.AwesomeReactGitHubAwesomeReact开源存储库列出了一些很酷的React相关内容。我可能忘记了其他网站，只是从这个链接学习了React。你会发现大量有用的资源，一定会帮助你构建出色的React应用程序！21.ProtonNativeProtonNative为我们提供了一个React环境来构建跨平台的本地桌面应用程序。Electron的替代品，具有一些简洁的功能，包括：与ReactNative相同的语法。适用于现有的React库，例如Redux。跨平台。本机组件。没有更多的电子。与所有普通的Node.js包兼容。有兴趣了解更多吗？阅读他们的文档。22.DevhintsReact.jsCheatsheet这是一个很好的React备忘单，尽管它缺少ReactHooks。别担心，我将为Reactv16.8+创建一个备忘单。