React开发人员应该把握的22种神奇工具 2019年

妇孺皆知，React 是 JavaScript 库，用于构建杰出的用户界面。但是，并不是每团体都在经常使用相反的工具或都知道一切有用的工具，这些工具有助于使 React 开发体验更幽默，更被动。

假设大家还没经常使用 React ，或许你有对它感兴味的好友，当他们问你为什么选用这个库的时刻，你该怎样回答呢？除了通知他们这个库有多棒以外（这应该是首先要说的事），我还想提一下，这些由开源社区创立的工具有助于把开发体验带到一个全新的令人兴奋的水平。

以下是 2019 年大家可以用来构建 React 运行程序的 22 个工具（该列表没有按它们的关键性排序）。

1. webpack-bundle-analyzer

大家有没有想过自己的运行程序哪些包或哪局部占用了所有空间？好了，咱们可以用 webpack-bundle-analyzer 来检查，它将协助咱们识别出占用最多空间的输入文件。

它将创立一个实时主机，并向咱们提供捆绑包内容的交互式可视化树状图。借助此工具包，咱们可以检查所显示文件的位置，它们的 gzip 大小，解析后的大小及其所属的父子级文件。

有什么好处？咱们可以依据看到的图示来优化咱们的 React 运行！

这是它的屏幕截图：

咱们可以分明地看到 pdf 软件包在运行程序中占据了最大的空间。它还占据了最大屏幕，这对咱们都很有用。

2. React-Proto

React-Proto 是面向开发人员和设计人员的原型制造工具。这是一个桌面软件，所以在经常使用之前，咱们须要下载装置该软件。

以下是工具页面样式：

该运行程序准许咱们申明属性及其类型，在树状图中检查组件，导入背景图像，将其定义为有形态或有形态，定义其父组件，加大/增加，以及将原型导出到一个新的或已有的名目中。

该运行程序仿佛更适宜 Mac 用户，不过，它也支持 Windows。

当咱们成功用户界面映射后，可以选用导出到现有名目或新名目中。假设选用导出到现有名目并选用了根目录，它们将被导出到 ./src/components，如下所示：

以下是在示例中咱们经常使用组件之一的例子：

React-Proto 在 GitHub 上取得了 2,000 个星标。

不过，我以为这个运行程序还须要更新，并且还有很多须要做的上班，尤其是 React Hooks 的颁布。

除非咱们有一张可见的背景图片，不然就不能增加。换句话说，假设导入一张背景图片，增加，而后删除这张图片后，图就无法加大了，由于操作按钮曾经变灰色，无法经常使用了。

加大的惟一方法是从新导入背景图片，加大后将其删除。这个缺陷扭转了我对这个工具发生的好感，但由于在其余中央看不到此开源文件，所以把它参与了列表中。当然，成为开源软件对这个运行程序来说是件善报，由于这使它有或许成为未来盛行的开源存储库列表。

3. Why Did You Render

Why Did You Render 猴子补丁 React 通知咱们可以防止重渲染。这不只十分有用，还可以指点咱们对名目启动性能修复，协助咱们了解 React 上班的方式。而且，当咱们对 React 上班原理有更多的了解时，也能让咱们成为更好的 React 开发人员。

猴子补丁: 这个叫法来源于 Zope 框架，大家在修正 Zope 的 Bug 的时刻经常在程序前面追加更新局部，这些被称作是“杂牌军补丁（guerilla patch）”，起初 guerilla 就慢慢的写成了 gorllia（猩猩），再起初就写了monkey（猴子），所以猴子补丁的叫法是这么莫明其妙的得来的。

咱们可以经过申明一个额外的静态属性 whyDidYouRender，并将其值设置为 true，把一个侦听器附加到恣意自定义组件：

const{children}

只要这样做之后，咱们的控制台才会弹出令人难以置信的烦人警报：

但别误解，请把它当成一件善报。应用那些烦人的信息，咱们就可以修复那些糜费的重渲染。

4. Create React App

大家都知道 Create React App 是启动开发 React 名目最快的方法（领有开箱即用的现代性能）。

还有什么能比 npx create-react-app <name> 更繁难的呢？

我在 Medium 上的教程（以及 Dev.to）都是用 create-react-app 构建 React 接口界面的，就由于它又快又繁难。

咱们当中有些人或许不知道如何用 CRA 来创立一个 TypeScript 名目。咱们要做的就是在末尾加上 --typescript：

这会帮咱们省去给 CRA 名目手工增加 TypeScript 的费事。

5. React-Lifecycle-Visualizer

React-Lifecycle-Visualizer 是一个 npm 软件包，用于跟踪和可视化恣意 React 组件的生命周期方法。

与 Why Did You Render 相似，咱们可以选用任何组件来启动生命周期可视化工具：

运转结果，如下所示：

但是，其中一个缺陷是它目前仅适用于类组件，因此尚不支持 Hook 。

Guppy 是 React 的一个友好且收费的运行程序治理器和义务运转器，可以在桌面上运转且支持跨平台，大家可以安心经常使用。

它提供了很多友好的图形界面，为 React 开发人员的一些典型义务名目提供支持。例如创立新名目，口头义务和治理依赖项。并在 2018 年 8 月增加支持 Windows，因此可以安心，它必需是跨平台的。

以下是 Guppy 经常使用时的样子：

7. react-testing-library

我不时很青睐 react-testing-library，由于在编写单元测试时觉得不错。这个包提供了适用的 DOM 测试程序，激励良好的测试通常。

此处置打算旨在处置测试实施细节的疑问，就像用户可以看到它们一样，而不是测试 React 组件的输入/输入。

测试实施细节并不是确保运行按预期运转的有效方法。当然，咱们能够更分明的了解如何失掉组件所需的数据，经常使用哪种排序方法等。但是，假设咱们必需更改成功方式以指向另一个数据库的话，单元测试就会失败，由于这些是耦合逻辑的成功细节。

这是 react-testing-library 处置的一个疑问，由于现实状况下，咱们只宿愿咱们的用户界面能够反常上班并最终正确显示。只需这些组件能够提供预期的输入，数据如何失掉到这些组件实践上并不关键。

以下是经常使用此库启动测试的示例代码：

8. React Developer Tools

React Developer Tools 是一个裁减插件，它准许在 Chrome 和 Firefox 开发人员工具中检查 React 组件档次结构。

这是 React 开发中最经常出现的裁减插件，并且是 React 开发人员用来调试其运行程序的最有用的工具之一。

在经常使用诸如 material-ui 或 semantic-ui-react 之类的组件库时，Bit 是一个很好的代替打算。它可以让咱们探求数千个开源组件，并经常使用它们来构建名目。

这些是由其余 React 开发人员上行的，这些开发人员就跟你我一样。

10. Storybook

假设大家还不了解 Storybook，并且宿愿能够轻松地构建 UI 组件，我剧烈倡导你立刻便用它。该工具启动了支持热重载的实时开发主机，让咱们可以在其中独立地实时开发 React 组件。

另一个很棒的事情是，咱们可以经常使用现有的开源插件，将咱们的开发阅历优化到一个全新的水平。例如，应用 Storybook README 包，咱们可以在同一页面上创立 README 文档，同时开发供消费经常使用的 React 组件。这足以作为惯例文档页面了：

11. React Sight

大家有没有想过自己的运行程序在流程图中看起来是什么样的？React -sight 可以让整个运行程序以树状图的方式展现档次结构，分明检查咱们的 React 运行程序。它还支持 React Router，Redux 和 React Fibre。

经常使用此工具，咱们可以将鼠标悬停在节点上，这些节点是指向树中与它们间接相关的组件的链接。

假设大家在检查结果时遇到疑问，可以在地址栏上输入 chrome:extensions，找到 React Sight

框并单击 Allow access to file URLs 开关，如下所示：

12. React-cosmos

React-cosmos 是用于创立可重复经常使用 React 组件的开发工具。

它会扫描名目中的组件，并且可以成功以下性能：

13. CodeSandbox

这是本次介绍中最好的可用工具之一，它可以让咱们手动经常使用 React 的速度比眨眼还快（好吧，兴许也没那么快）。

这个称为 CodeSandbox的工具是一个在线编辑器，咱们从创立原型到 Web 运行程序部署 - 都可以在这个网站成功！

在早期，Codesandbox 仅支持 React，但如今曾经裁减到 Vue 和 Angular 等库。他们还支持经常出现的静态站点生成器（如 gatsby 或 nextjs ）创立名目来启动下一个 React Web 名目。

关于 codesandbox，它不只生动，还有很多无心思的事情可以探讨。

假设大家须要探求一下人们为繁难大家起见正在构建的一些名目，那么单击 explore 就可以轻松访问到少量代码示例，来协助大家更新下一个名目：

大家一旦开局编辑名目，就会看法到，实践上要经常使用的是特性能弱小的 VSCode 编辑器。

我很想写一篇完整的文章，引见咱们当天在 codeandbox 上可以经常使用的一切性能，不过，如今看起来上班曾经成功了。

14. React bits

React bits 是 React 形式、技术、技巧和窍门的汇合，一切这些都以相似在线文档的格局编写，大家可以在同一个选项卡上极速访问不同的设计形式和技术、反形式、样式、UX 变体以及其余有用的与 React 相关的资料。

他们有一个 GitHub 存储库，目前有 10437 星。

一些示例包含诸如道具代理，在不同场景下处置各种 UX 的组合之类的概念，甚至还揭示了每个开发人员应该防止的一些圈套。

这是他们页面上的样子，如大家在左侧的菜单上看到的那样，有很多信息：）

15. Folderize

Folderize 是一个 VSCode 裁减。它可以让咱们将组件文件转换为组件文件夹结构。转换后的 React 组件仍将是一个组件，只是如今已转换为一个目录。

例如，假定咱们正在创立一个 React 组件，它把文件作为属性以显示有用的信息，比如它们的元数据。元数据组件的逻辑占用了很多行，因此咱们选择将其拆分为一个独自的文件。但是，当咱们选择这样做时，咱们就有了两个相互关联的文件。

因此，假设咱们的目录如下所示：

咱们或许想把 FileView.js 和 FileMetadata.js 形象到目录结构中，像 Apples- 那样，特意是假设咱们宿愿增加更多与文件相关的组件，比如 FileScanner.js 。这就是 folderize 可以为咱们做的事情，这样它们就可以具有以下相似结构：

16. React Starter Projects

React Starter Projects 是一个很棒的依赖库列表，咱们可以在一个页面中检查所有名目。因此，假设咱们觉得能同时极速检查到少量选项是十分有用的，那么这个很适宜咱们。

一旦看到青睐的入门名目后，咱们就可以繁难克隆存储库，依据开发中的运行须要启动繁难修正。但是，并非一切的库都用来克隆存储库，由于其中一些库须要经过装置方式，能力成为名目的依赖项。这样可以更轻松地失掉更新并坚持名目整洁。

以下是该页面看起来的样子：

17. Highlight Updates

可以说，这是每个开发者工具包里都应该有的关键工具。Highlight Updates 是 React DevTools 的一项裁减性能，可以检查页面中的哪些组件正在不用要地重渲染。

它们会用橙色/白色标出重大的重渲染疑问，协助咱们在开发页面时更容易的发现一些性能疑问。

除非咱们的指标是构建伟大的运行程序，否则为什么不试试这个在咱们身边的好物品。

18. React Diff Viewer

React Diff Viewer 是经常使用 Diff 和 React 制造的繁难好看的文本差异检查器。支持多种性能，如：分屏视图，内联视图，单词差异，行高亮显示等。

假设咱们想将此性能嵌入记事本（如 Boostnote）和自定义至运行程序（比如主题色彩、故事演示文档组合等），那么，它将十分有用。

19. JS.coach

JS.coach 是我常罕用来查找 React 相关资料的网站。我不知道为什么提到这个网站的人不多，但在这个页面我发现了简直一切我须要的信息，它快捷、繁难，并不时更新，总是能为我一切的名目提供所需的结果。

最近，他们增加了 React VR 选项卡，这真是太好了！

20. Awesome React

Awesome React 开源库是一个与 React 相关的并十分棒的列表。

这让我或许会遗记其余网站只从这个链接学习 React 。由于可以在此找到少量有用的资源，这些资源必需会协助咱们构建杰出的 React 运行程序！

21. Proton Native

Proton Native 为大家提供了一个 React 环境来构建跨平台的本机桌面运行程序。

它是 Electron 的代替产品，只要一些繁复的性能，包含：

有兴味了解更多吗？请浏览他们的文档。

22. Devhints React.js Cheatsheet

一个不错的 React 速查表，虽然它缺少 React Hooks。不用担忧，我将为 Reactv16.8 + 创立速查表，请继续关注。

论断

以上就是本次分享的所有工具。

宿愿大家在这里找到了有价值的信息。