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

本文经 Jsmanifest 受权 LeanCloud 翻译转载， 原文连接。

众所周知，React 是 JavaScript 库，用于构建出色的用户界面。可是，并非每一个人都在使用相同的工具或都知道全部有用的工具，这些工具备助于使 React 开发体验更有趣，更主动。

若是你们还没使用 React ，或者你有对它感兴趣的朋友，当他们问你为何选择这个库的时候，你该怎么回答呢？除了告诉他们这个库有多棒之外（这应该是首先要说的事），我还想提一下，这些由开源社区建立的工具备助于把开发体验带到一个全新的使人兴奋的水平。

如下是 2019 年你们能够用来构建 React 应用程序的 22 个工具（该列表没有按它们的重要性排序）。

1. webpack-bundle-analyzer

你们有没有想过本身的应用程序哪些包或哪部分占用了所有空间？好了，咱们能够用 webpack-bundle-analyzer 来查看，它将帮助咱们识别出占用最多空间的输出文件。

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

有什么好处？咱们能够根据看到的图示来优化咱们的 React 应用！

这是它的屏幕截图：

咱们能够清楚地看到 pdf 软件包在应用程序中占据了最大的空间。它还占据了最大屏幕，这对咱们都颇有用。

不过，屏幕截图质量很是小。咱们还能够输入有用的选项以查看更多详细信息，如 generateStatsFile: true， 而且能够选择生成静态 HTML 文件，保存在开发环境以外的某个地方，以备后用。

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，把一个侦听器附加到任意自定义组件：

import React from 'react'
import Button from '@material-ui/core/Button'

const Child = (props) => <div {...props} />

const Child2 = ({ children, ...props }) => (
  <div {...props}>
    {children} <Child />
  </div>
)

Child2.whyDidYouRender = true

const App = () => {
  const [state, setState] = React.useState({})

  return (
    <div>
      <Child>{JSON.stringify(state, null, 2)}</Child>
      <div>
        <Button type="button" onClick={() => setState({ hello: 'hi' })}>
          Submit
        </Button>
      </div>
      <Child2>Child #2</Child2>
    </div>
  )
}

export default App

只有这样作以后，咱们的控制台才会弹出使人难以置信的烦人警报：

但别误会，请把它当成一件好事。利用那些烦人的消息，咱们就能够修复那些浪费的重渲染。

4. Create React App

你们都知道 Create React App 是启动开发 React 项目最快的方法（拥有开箱即用的现代功能）。

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

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

咱们当中有些人可能不知道如何用 CRA 来建立一个 TypeScript 项目。咱们要作的就是在末尾加上 --typescript：

npx create-react-app <name> --typescript

这会帮咱们省去给 CRA 项目手工添加 TypeScript 的麻烦。

5. React-Lifecycle-Visualizer

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

与 Why Did You Render 类似，咱们能够选择任何组件来启动生命周期可视化工具：

import React from 'react'
import {
  Log,
  VisualizerProvider,
  traceLifecycle,
} from 'react-lifecycle-visualizer'

class TracedComponent extends React.Component {
  state = {
    loaded: false,
  }

  componentDidMount() {
    this.props.onMount()
  }

  render() {
    return <h2>Traced Component</h2>
  }
}

const EnhancedTracedComponent = traceLifecycle(TracedComponent)

const App = () => (
  <VisualizerProvider>
    <EnhancedTracedComponent />
    <Log />
  </VisualizerProvider>
)

运行结果，以下所示：

可是，其中一个缺点是它目前仅适用于类组件，所以尚不支持 Hook 。

6. Guppy

Guppy 是 React 的一个友好且免费的应用程序管理器和任务运行器，能够在桌面上运行且支持跨平台，你们能够放心使用。

它提供了不少友好的图形界面，为 React 开发人员的一些典型任务项目提供支持。例如建立新项目，执行任务和管理依赖项。并在 2018 年 8 月添加支持 Windows，所以能够放心，它确定是跨平台的。

如下是 Guppy 使用时的样子：

7. react-testing-library

我一直很喜欢 react-testing-library，由于在编写单元测试时感受不错。这个包提供了实用的 DOM 测试程序，鼓励良好的测试实践。

此解决方案旨在解决测试实施细节的问题，就像用户能够看到它们同样，而不是测试 React 组件的输入/输出。

测试实施细节并非确保应用按预期运行的有效方法。固然，咱们可以更清楚的了解如何获取组件所需的数据，使用哪一种排序方法等。可是，若是咱们必须更改实现方式以指向另外一个数据库的话，单元测试就会失败，由于这些是耦合逻辑的实现细节。

这是 react-testing-library 解决的一个问题，由于理想状况下，咱们只但愿咱们的用户界面可以正常工做并最终正确显示。只要这些组件可以提供预期的输出，数据如何获取到这些组件实际上并不重要。

如下是使用此库进行测试的示例代码：

// Hoist helper functions (but not vars) to reuse between test cases
const renderComponent = ({ count }) =>
  render(
    <StateMock state={{ count }}>
      <StatefulCounter />
    </StateMock>,
  )

it('renders initial count', async () => {
  // Render new instance in every test to prevent leaking state
  const { getByText } = renderComponent({ count: 5 })

  await waitForElement(() => getByText(/clicked 5 times/i))
})

it('increments count', async () => {
  // Render new instance in every test to prevent leaking state
  const { getByText } = renderComponent({ count: 5 })

  fireEvent.click(getByText('+1'))
  await waitForElement(() => getByText(/clicked 6 times/i))
})

8. React Developer Tools

React Developer Tools 是一个扩展插件，它容许在 Chrome 和 Firefox 开发人员工具中查看 React 组件层次结构。

这是 React 开发中最多见的扩展插件，而且是 React 开发人员用来调试其应用程序的最有用的工具之一。

9. Bit

在使用诸如 material-ui 或 semantic-ui-react 之类的组件库时，Bit 是一个很好的替代方案。它可让咱们探索数千个开源组件，并使用它们来构建项目。

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

这些是由其余 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 组件的开发工具。

它会扫描项目中的组件，而且能够实现如下功能：

• 用属性、上下文和状态的任意组合下渲染组件
• 模拟每一个外部依赖项（例如 API 响应、localStorage 等）
• 与正在运行的实例进行交互时，查看应用程序状态的实时变化

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 能够为咱们作的事情，这样它们就能够具备如下相似结构：

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 + 建立速查表，请继续关注。

结论

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

但愿你们在这里找到了有价值的信息。