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

众所周知，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 

（编辑：ASP站长网）