2019 年，React 开发人员应该使用的 22 个神奇工具(3)

Bit 让我们探索数以千计的开源组件，并允许我们使用它们来构建项目。

有很多不同的 React 组件，可供任何人使用，包括选项卡、按钮、图表、表格、导航条、下拉菜单、加载旋转器、日期选择器、面包屑导航(breadcrumbs)、图标、布局等等。

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

但是，也有一些可用的实用程序，如格式化日期之间的距离。

10. Storybook

如果你还不知道 Storybook ，并希望能够更容易地构建 UI 组件，那么，我强烈建议你开始使用它。

该工具启动一个实时开发服务器，支持开箱即用的热重载，我们可以在其中独立地实时开发 React 组件。

关于这个还有一件很棒的事情是，我们可以使用现有的开源插件，把我们的开发体验提升到一个全新的水平。

比如，借助 Storybook README 包，我们可以创建 README 文档，同时，在同一页面上开发用于生产的 React 组件。

这足以作为普通的文档页面了：

11. React Sight

大家有没有想过，自己的应用程序在流程图中看起来是什么样子? React Sight 可以让大家可视化自己的 React 应用程序，借助整个应用程序的实时组件层次结构树呈现。

它还支持 反应路由器(react-router) 、 Redux ，以及 React Fiber 。

借助该工具，大家可以将鼠标悬停于节点上，它们是指向那些跟树中直接跟它们有关的组件的链接。

如果大家在查看结果时遇到困难，那么，可以在地址栏中键入 chrome:extensions，查找 React Sight 工具箱，然后点击 Allow access to file URLs 开关，如下所示：

12. React Cosmos

React Cosmos 是用于创建可重用 React 组件的开发工具。

它扫描项目中的组件，并使我们能够：

用属性、上下文和状态的任意组合来渲染组件。

模拟每个外部依赖项(如：API 响应、localStorage 等等)。

在和运行中的实例进行交互时，实时查看应用程序的状态演变。

13. CodeSandbox

这毫无疑问是最好的可用工具之一，可以让我们亲手使用 React 的速度比眨眼还要快(好吧，也许没有那么快)。

这个被称为 CodeSandbox 的工具是一个在线编辑器，它让我们从原型创建 web 应用程序以进行部署——所有这些都来自该网站。

在早期阶段， CodeSandbox 最初只支持 React，但是，现在已经扩展到如 Vue和 Angular 等库的附加启动模板。

它们还通过使用 Gateby 或 Next.js 等常用静态站点生成器创建项目，支持启动下一个 React web 项目。

谈到 CodeSandbox，有很多好东西可以讲。首先，它非常活跃。

如果大家需要探索一下人们为方便大家起见正在构建的一些项目，那么简单地点击一下 explore 就可以访问一大堆代码示例，来帮助大家更新下一个项目：

一旦大家开始编辑一个项目，就会意识到，将要使用的实际上是个强大的 VS Code编辑器。

我很想写一篇文章全面介绍一下如今我们可以在 CodeSandbox 使用的功能，但是，看起来，这项工作 已经完成了 。

14. React Bits

React Bits 是 React 模式、技术、技巧和窍门的集合，都是用类似于在线类文档的格式编写的，大家可以快速地访问不同的设计模式和技术、反模式、样式、UX 变体和其他有帮助的与 React 相关的材料，所有这一切都在同一个选项卡上。

他们有个 GitHub 存储库 ，目前有 9923 个星标。

一些示例包括一些概念，如属性代理、用于在不同场景中处理不同 UX 的组合，甚至公开了一些每个 React 开发人员都应该知道的一些陷阱。

这就是在他们页面上的感觉。正如大家可以在左侧菜单上看到的，上面有很多信息：

15. folderize

folderize 是一个 VS Code 扩展，发布的时间还不到 7 天。它使我们能够把一个组件文件转换为组件文件夹结构。我们的 React 组件仍将是个组件，只是现在它转换成一个目录而已。

比如，假设我们在创建一个 React 组件，它把文件作为属性以显示有用的信息，比如它们的元数据。

用于元数据组件的逻辑占用了很多行，因此，我们决定把这个拆分成一个单独的文件。但是，当我们决定这么做的时候，我们就有了两个相互关联的文件。

因此，如果我们有个像这样的目录：

我们可能想把 FileView.js 和 FileMetadata.js 抽象到一个目录结构中，就像 Apples 那样——尤其是，如果我们正在考虑添加更多与 FileScanner.js 等文件相关的组件。

这就是 folderize 为我们所做的事，这样，它们可以得到与下面类似的结构：

16. React 启动项目

以下是一个很棒的 React 启动项目 列表，我们可以在一个页面上看到全部项目。因此，如果我们是那种觉得用一个巨大的列表来同时列出所有的选项是很有用的人，那么这个就很适合我们。

一旦看到我们喜欢的启动项目，我们可以简单地克隆存储库，并根据我们将要开发的应用程序做一些修改。

然而，并不是所有的库都打算通过克隆存储库来使用，因为它们中有一些是要安装的，这将成为我们项目中的依赖项。

这使获得更新并保持项目简洁变得更容易。

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

17. 高亮显示更新(Highlight Updates)

按理说，这是最重要的工具，任何人都会把它放在自己的开发工具包里。 高亮显示更新 是 React DevTools 扩展的功能，可以让我们查看页面中有哪些组件进行了不必要的重渲染：

它有助于我们看到开发页面时的瓶颈问题，并且因为它们用橙色或红色对严重的重渲染问题进行了着色，所以更容易发现问题。

除非我们的目标是构建一个平庸的应用程序，否则为什么不试试这个在我们身边的好东西呢?

18. React Diff Viewer

React Diff Viewer 是个简单又美观的文本差异查看器，用 Diff 和 React 构建而成。它支持这些功能，如：分屏视图、内联视图、单词差异、行高亮等等。

（编辑：ASP站长网）