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

正如我们所知， React 是 JavaScript 库，用于构建精彩的用户界面。然而，并不是每个人都在使用相同的工具或知道有这么一些出色的工具，可以让 Reacat 开发体验变得更加有趣和积极主动。

如果大家还没有用过 React，或者大家的朋友可能有兴趣使用它，那么，当被问及为什么要使用这个库的时候，我们该怎么回答呢?

除了告诉他们这个库多么棒以外(这应该是首先要说的事)，我还会提一下，由开源社区创建的工具有助于把开发体验带到一个全新的令人兴奋的水平。

以下是 2019 年大家可以用来构建 React 应用程序的 22 个工具(该列表没有按它们的重要性排序)

1. Webpack Bundle Analyzer

有没有想过自己的应用程序中的哪些包或哪些部分占用了全部的空间?好了，我们可以用 Webpack Bundle Analyzer 来找出答案。这个包将帮助我们识别出占用最多空间的输出文件。

它将创建一个活动服务器，可视化我们的包的内容，用一个交互式树状图呈现给我们。在我们的工具包里有了这个工具之后，我们就能够看到呈现的文件所处的位置、它们的 gzip 大小、解析后的大小以及它们的父文件 / 子文件。

好处?嗯，我们可以根据所看到的来优化自己的 React 应用程序!

下面是个截屏，它看起来就是这样的：

我们可以清楚地看到，PDF 包在应用程序中占用了大部分空间。并且，它还占据了大部分的屏幕。这非常有用。

然而，截屏是最低限度的展示。我们还可以传入有用的选项，以更详细地查看它，如 generateStatesFile：true，还可以选择生成一个静态 HTML 文件，我们可以把它保存在我们的开发环境外面的某个地方，以便以后使用。

2. React-Proto

React-Proto 是开发人员和设计人员的原型工具。它是一个桌面软件，因此，在使用之前，我们必须下载并安装该软件。

以下是该软件在使用时的一个示例：

该应用程序允许我们声明属性及其类型、在树状图中查看我们的组件，导入一张背景图片、把它们定义为有状态或无状态、定义其父组件、放大 / 缩小，并把原型导出到一个新的或现有的项目中。

该应用程序似乎更适合 Mac 用户，但是，它也适合 Windows 用户。

当我们完成用户界面的映射时，可以选择导出到一个现有项目或一个新项目中。如果选择导出到一个现有项目并选择了根目录，它将把它们导出到./src/components，如下所示：

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

React-Proto 在 GitHub 上已经获得了 2000 多个星标。

但是，我本人认为该应用程序需要更新，而且还有更多的工作要做，尤其是 React Hooks 的发布。

除非我们有一张可见的背景图片，不然就不会缩小。换句话说，如果导入一张背景图片，缩小，然后删除这张图片，那么，就无法放大了，因为操作按钮已经变灰色，不可使用了。

唯一能够放大的方法是再次导入该背景图片，然后在放大后删除它。这个缺陷改变了我对该应用程序的看法，但是，因为我们在其他地方都看不到这个开源工具，所以还是把它放进了列表中。

还有，成为开源软件对这个应用程序来说是件好事，因为这使它有可能成为未来流行的开源存储库列表(它们的特点是重要的，但是，它们似乎缺人手。)

3. Why Did You Render

Why Did You Render 猴补丁(monkey patches) React 通知我们可以避免的重渲染。这非常有用，不仅可以指导我们为我们的项目进行修复，而且可以帮助我们理解 React 的工作原理。并且，当我们对 React 的工作原理有更好的理解时，我们就会成为更好的 React 开发人员。

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

importReactfrom'react' 
importButtonfrom'@material-ui/core/Button' 
constChild =(props) =><div {...props} /> 
constChild2 =({ children, ...props }) =>( 
<div{...props}> 
{children}<Child/> 
</div> 
) 
Child2.whyDidYouRender =true 
constApp =()=>{ 
const[state, setState] = React.useState({}) 
return( 
<div> 
<Child>{JSON.stringify(state, null, 2)}</Child> 
<div> 
<Buttontype="button"onClick={()=>setState({ hello: 'hi' })}> 
Submit 
</Button> 
</div> 
<Child2>Child #2</Child2> 
</div> 
) 
} 
exportdefaultApp 

只有在这么做了以后，我们的控制台才会弹出令人难以置信的恼人警报：

别误会我的意思。要把它当做好事情。利用这些恼人的消息，这样我们就可以修复这些很浪费的重渲染，并且，这些恼人的消息最终将不再烦人。

4. Create React 应用程序

大家都知道 Create React 应用程序 是启动开发 React 项目最快的方法(拥有开箱即用的现代功能)。

还有什么能比 npx create-react-app 更简单的呢?

我在 Medium 上的教程都是用 create-react-app 构建 React 接口界面的，只是因为它又快又简单。

（编辑：ASP站长网）