2019年，React开发人员应该掌握的22种神奇工具(4)

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

15. Folderize

Folderize 是一个 VSCode 扩展。它可以让我们将组件文件转换为组件文件夹结构。转换后的 React 组件仍将是一个组件，只是现在已转换为一个目录。

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

因此，如果我们的目录如下所示：

我们可能想把 FileView.js 和 FileMetadata.js 抽象到目录结构中，像 Apples- 那样，特别是如果我们希望添加更多与文件相关的组件，比如 FileScanner.js 。这就是 folderize 可以为我们做的事情，这样它们就可以具有以下类似结构：

import React from 'react'  
import FileView from './src/components/FileView'  
const App = (props) => <FileView {...props} />  
export default App 

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 的替代产品，只有一些简洁的功能，包括：

•  与 React Native 相同的语法
•  适用于现存的 React 库，例如 Redux
•  跨平台
•  原生组件，不再有 Electron
•  与所有正常的 Node.js 包兼容

有兴趣了解更多吗？请阅读他们的文档。

22. Devhints React.js Cheatsheet

一个不错的 React 速查表，尽管它缺少 React Hooks。不用担心，我将为 Reactv16.8 + 创建速查表，请继续关注。

结论

以上就是本次分享的全部工具。

希望大家在这里找到了有价值的信息。

（编辑：ASP站长网）