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。图标集缺少的字形，由 icons 绘制并添加到共享图标包或文件夹中，则不算问题。

对照项

每项检查都要成对呈现。问题行旁边应列出替代它的行。

规则	问题写法	替代写法
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	使用 width: 12px 的 18px 图标	使用图标集中的 12px 图标

报告

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

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

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

然后提供 Rule | Count | Severity 汇总。只要仍有任何 HIGH，就标记为 Block；否则标记为 Approve。绝不对未阅读的文件标记 Approve。将所有无法运行的检查标记为 Not verified。