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 接口界面的，只是由于它又快又简朴。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!