00:00:00React 刚刚推出了一个名为 React Doctor 的全新反模式扫描工具。
00:00:05它由 Aidan Bai 开发,这位才华横溢的开发者此前还创作了 Million.js、
00:00:11React Grab、React Scan 以及 Amy。
00:00:14在今天的视频中,我们将一起研究这个工具,了解它的工作原理,并亲自
00:00:19上手尝试。
00:00:20这一定会很有趣,让我们开始吧。
00:00:27React Doctor 是一个简单的命令行(CLI)工具,旨在检测常见的 React 反模式,
00:00:33例如不必要的 useEffect 使用、无障碍访问问题或属性钻取(prop drilling)。
00:00:38在底层,它利用了 OX lint,这是用 Rust 编写的最快的 JavaScript 代码检查工具之一。
00:00:43由于 OX lint 是基于 Rust 构建的,
00:00:44它可以在几毫秒内扫描数万行代码。
00:00:49它利用这一特性构建项目标抽象语法树(AST),
00:00:50寻找特定的 React 模式,如 Hook 的使用、属性解构和组件边界。
00:00:56它涵盖了超过 47 项 React 最佳实践,并包含实用的扫描功能,
00:01:01例如扫描意外硬编码的安全密钥(如这两个例子),
00:01:08或者检查加载状态模式,并提供详细报告,
00:01:13告诉你何时该用该模式,何时该改用 useTransition。
00:01:19该项目完全开源,而且还非常新。
00:01:21因此,这是社区贡献的好机会,大家可以添加
00:01:25你认为这里缺失的其他优秀实践检查。
00:01:30我认为这个项目最酷的地方在于 UI。
00:01:33它的设计和美感非常出色,而且得益于 OX lint,它的速度极快。
00:01:36最重要的是,你还可以将它作为 AI 编程助手的技能来运行,
00:01:42也可以在 Node.js API 等场景中通过编程方式使用它。
00:01:47现在让我们亲自试用一下这个工具。
00:01:52我有一个基于 React 的代码项目,这是一个基础的股票图表可视化工具,
00:01:54是我六年前写的,那时候 AI 还没火起来。
00:02:00看看我六年前写的 React 代码质量如何,一定会很有趣。
00:02:04我将在我的仓库中运行 react-doctor 命令。
00:02:09如你所见,结果瞬间就出来了。
00:02:12看看这个。
00:02:15我的项目几乎得了满分。
00:02:16看到即使在六年前,我也能写出高质量的 React 代码,
00:02:18真的让我很欣慰。
00:02:24好,让我们看看它发现了什么。
00:02:25我们收到了一个关于使用索引(index)作为 key 的警告,这非常正确。
00:02:27它还识别出 recharts 是一个庞大的库,
00:02:31因此建议我改用延迟加载(lazy loading)。
00:02:35它还注意到我在单个 useEffect 中调用了四次 useState,
00:02:38建议我考虑使用 useReducer。
00:02:44这些建议都非常中肯。
00:02:46谢谢你,React Doctor。
00:02:48现在让我们尝试在更大的代码库上运行它。
00:02:49这是一个非常流行的 CRM 项目,名叫 20,它是 Salesforce 的开源
00:02:52替代方案。
00:02:57它是用 React 编写的。
00:02:59让我们克隆这个仓库,看看 React Doctor 如何评价它。
00:03:00一旦运行,我们可以看到 React Doctor 自动检测出这是一个
00:03:04单体多库(monorepo)项目,并能识别出各个包。
00:03:08首先让我们为他们的营销网站包评分。
00:03:12正如我们所见,评分也很不错。
00:03:15虽然有一个错误,但只是缺少 alt 标签。
00:03:18总的来说,这是一个非常高的分数。
00:03:22好,现在让我们检查一下 front 包。
00:03:25这个包的表现稍差,因为有 99 个错误,但仍处于绿色安全区间。
00:03:30所以我的建议是:
00:03:35如果你是想要提升 GitHub 作品集的开发者,这是一个很好的工具,
00:03:37可以扫描各种开源项目并找出
00:03:41你可以做出重大贡献的地方。
00:03:47这就是 React Doctor 的简要介绍,我认为它是一个非常
00:03:48轻量且实用的工具,能显著帮助你校对和检查
00:03:52你的 React 项目。
00:03:58我以后肯定会在我自己的项目中使用它。
00:03:59各位,如果你觉得这个视频有用,请点击视频下方的
00:04:03点赞按钮告诉我。
00:04:07也别忘了订阅我们的频道,这样你就不会错过任何
00:04:09未来的视频。
00:04:14我是来自 Better Stack 的 Andris,我们下期视频再见。
00:04:15再见。