reuse

复用

此技能规定了构建新内容时的优先顺序。先使用项目自身的部分，再使用维护良好的库或平台功能。自定义代码放在最后。

重复项就是一项发现

如果新增的组件、样式或图标与项目中已有内容重复，就构成一项发现。先在共享包中添加基础组件，再使用它，则不构成发现。没有共享包的项目，则根据其已有依赖库进行判断。

删掉无人要求的内容属于 restraint。复制外部应用属于 match。

优先使用项目自身的部分

编写 UI 之前，先搜索共享组件包、图标集和设计令牌。说明你找到了什么。在项目的 Input 旁边使用原始 <input>，属于 reuse-house-component-first。

组件按发布时的方式使用

使用组件的变体和 data-* 属性。通过本地 className 重新设置样式，属于 reuse-no-local-restyle。

每类内容只采用一种样式

菜单、表格和对话框外壳都只保留一种样式。再增加一种下拉菜单样式，属于 reuse-one-standard。

在基础组件中一次修复

如果修复适用于每个实例，就在共享组件内部完成。不要在五个调用处分别打补丁，这属于 reuse-fix-in-the-primitive。然后搜索所有同类项，移除它们的本地修复，并列出文件。只修复引用的那一行，属于 reuse-sweep-siblings。

然后使用库或平台功能

项目没有合适内容时，优先使用维护良好的库或平台功能，而不是自定义代码。Intl 可用于格式化日期和数字。原生上下文菜单可处理右键操作。手写格式化器属于 reuse-library-before-custom。

确认库仍在维护。如果没有维护，就移植其模式，而不是安装它。这属于 reuse-no-stale-dependency。

先读文档，再看属性

使用基础组件之前先阅读文档，并使用当前 API。猜测属性属于 reuse-read-the-docs。

使用图标集中的原生尺寸图标

使用项目图标集中的图标，并保持其绘制时的尺寸。生成 SVG，或将 18px 图标缩放到 12px，属于 reuse-icon-set-native-size。

对照示例

每项检查都由一组对照示例组成。问题代码旁边就是替代代码。

规则	问题代码	替代方案
reuse-house-component-first	<input className={styles.search} />	项目的 <Input />
reuse-no-local-restyle	共享 Menu 旁的 .menu { border-radius: 6px }	按发布时的方式使用 Menu
reuse-one-standard	三个界面采用三种下拉菜单样式	一个 Menu
reuse-fix-in-the-primitive	在五个调用处添加滚动渐隐效果	在 ScrollArea 内添加渐隐效果
reuse-sweep-siblings	修复引用的那一行，却遗漏同类项	修复所有同类项，并列出文件
reuse-library-before-custom	手写相对日期格式化器	Intl.RelativeTimeFormat
reuse-no-stale-dependency	安装未维护的包	将其模式移植到项目中
reuse-read-the-docs	在本身已经是按钮的触发器上使用 render={<button />}	使用文档所述的属性，或不使用属性
reuse-icon-set-native-size	将 18px 图标设为 width: 12px	使用图标集中的 12px 图标

报告

严重性。 HIGH 表示重复使用已有共享组件，或手动构建基础组件已涵盖的控件。MEDIUM 表示本地重新设置样式、使用图标集之外的图标，或只在一个调用处应用共享修复。LOW 表示选择库时没有确认它是否仍在维护。

格式。 每个根本原因报告一项发现：

file:line - [rule-id] what is wrong

然后提供 Rule | Count | Severity 汇总。仍有任何 HIGH 项时，使用 Block；否则使用 Approve。绝不要对未阅读过的文件标记 Approve。无法执行的检查一律标记为 Not verified。