React 开发人员应该掌握的 22 个神奇工具

除了汇报他们这个库何等棒以外(这应该是起主要说的事)，我还会提一下，由开源社区建设的器材有助于把开拓体验带到一个全新的令人欢快的程度。

以下是 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，如下所示：

（编辑：湖南网）

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