收藏！送给React研发人员的22款超强工具

全文共7972字，预计学习时长16分钟

图自 Unsplash, 丹尼斯·布伦德尔摄

众所周知，React是一个JavaScript 库，用来建立强大的用户接口。然而，并不是每个人都在用相同的工具，都知道那些能让 React 研发体验变得更有趣、更积极主动的超棒工具。

这里有22款工具，2019年用它们打造 React 应用程序吧！（列表不按重要性排名）

1. Webpack Bundle Analyzer

https://github.com/webpack-contrib/webpack-bundle-analyzer

有没有想过是什么程序包或应用程序的零件占用了所有空间？Webpack Bundle Analyzer 可以帮你找到答案。这款程序包可帮助用户识别那些占用了大部分空间的输出文件。

它会创建一个实况服务器，以交互式树图这一可视化方式显示软件集的内容。软件包中有了它，就可以看见显示文件的位置、其压缩文件的大小、解析文件大小以及其源文件/衍生文件。

好处是什么？基于所见优化 React 程序！

这是该应用程序的截图：

显而易见， pdf 程序包在应用程序中占用了大部分空间。但它也占用了屏幕上的大部分空间。这真的很有用。

然而，这个截屏是最小化的，还可以浏览一些有用的选项查看更多细节，比如 generateStatsFile: true，并且也可以选择生成静态的 HTML 文件，将其保存到研发环境外以备用。

2. React-Proto

https://github.com/React-Proto/react-proto

React-Proto 是一款提供给研发人员和设计人员的原型化工具。这是一款桌面软件，所以在使用前必须进行下载和安装。

这是该软件使用实例：

这款应用程序允许用户申报小道具及其类型，在树形图中查看组件，输入背景图像，定义其有无状态，明确其父组件是什么，进行缩放，将原型输出到一个新的或已存在的项目中。

这款程序看上去更像是为 Mac 用户量身定制，然而，对 Windows 用户来说，它还是很好用。

已经完成用户接口绘制时，就可以选择输出到一个现存的项目还是一个新项目中。如果选择输出到现存的项目并选择了根目录，就会像这样输出到 ./src/components：

此处为实例中存在的组件之一的样例：

React-Proto 在 GitHub 获得了2,000多星的好评。

然而，就笔者个人而言，这款应用程序仍需更新改进，尤其是 React Hooks 的发行。

而且它无法缩小，除非存在可见的背景图像。换言之，如果输入一个背景图像，缩小，然后删除背景图像，那将无法再次放大图像，因为按钮会变成灰色。

重新放大的唯一途径就是重新输入背景图像，并在重新放大后再将其移除。这一瑕疵改变了笔者对这款应用的看法，但它仍位列前22款工具之中，因为如此开源的确独此一家。

开源是该应用程序的优势，因为它为在未来形成趋向开源的代码库列表中提供了各类可能性。（其优势很重要，但似乎缺少人力资源支持。）

3. Why Did You Render

https://github.com/welldone-software/why-did-you-render

这款Why Did You Render 修补程序通过告知研发人员一些可避免的刷新来修复 React。

这太有用了，不仅指导了项目的修复工作，还帮助研发人员了解 React 的运作过程。对 React的运作有了更好的理解后，React 研发人员将大获成功。

通过显示值为 true的额外静态性能 whyDidYouRender

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！