尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

React Doctor improve-react 技能的审计手册:五大类别 React 代码库审计框架与规则级整改方法论

React Doctor improve-react 技能的审计手册:五大类别 React 代码库审计框架与规则级整改方法论 React Doctor improve-react 技能的审计手册五大类别 React 代码库审计框架与规则级整改方法论【免费下载链接】react-doctorYour agent writes bad React. This catches it项目地址: https://gitcode.com/GitHub_Trending/re/react-doctor本篇技术指南围绕 react-doctor 仓库中 AUDIT.mdReact Audit PlaybookReact 审计手册展开完整解读该improve-react顾问型技能如何将一次 React 代码库审计组织为“Bugs correctness、Performance、Accessibility、Security、Maintainability architecture”五大用户可见类别每个类别覆盖哪些缺陷面、应优先“狩猎”哪些具体规则、扫描之外的架构嗅觉应如何补充判断。读完本文你能掌握一套可复现的 React 代码库审计方法论——如何用规则证据加“杠杆率”leverage判断排序审计发现以及如何通过规范修复配方canonical fix recipe机制保证每条整改方案精确到行而不靠模型臆测。一、审计手册的定位只读顾问技能的核心参考件react-doctor 项目Your agent writes bad React. This catches it除了扫描器本身还在仓库的skills/目录下内置了两组面向 AI Agent 的技能定义。其中 SKILL.md 定义的improve-react技能是一个只读顾问技能它像资深 React 工程师一样巡检整个代码库以 React Doctor 扫描结果为机器验证过的证据再叠加静态工具给不出的“杠杆判断”最终产出交给其他甚至更便宜的Agent 执行的自包含实施计划——它从不修改源码。该技能的工作流分为四个阶段Recon 侦察、Audit 审计、Vet 复核、Write plans 写计划而 AUDIT.md 正是 Phase 2 审计阶段所使用的规则目录与判断标准五个审计类别各自定义了“Hunt for应狩猎的规则清单”与“Beyond the scan扫描之外的补充检查”配套的 PLAN-TEMPLATE.md 则定义了审计发现落地为实施计划的固定格式。审计的前置事实基础一次只读 JSON 扫描AUDIT.md 要求“每一条发现都必须在其path:line处得到确认”这个事实基础来自 SKILL.md 中 Phase 1 的侦察命令npx react-doctorlatest --json --json-out react-doctor-report.json扫描以 JSON 输出结构化发现规则 id、类别、严重级、file:line构成审计的 ground truth。SKILL.md 同时强调React Doctor 会根据技术栈能力React vs Preact、Hooks/Compiler/RSC、Next.js 等元框架、状态库门控规则所以技术栈识别结果直接决定哪些发现会出现——这正是侦察阶段要先摸清栈配置的原因。核心原则修复方案不许由审计者“发明”AUDIT.md 开篇即立下全篇第一原则凡能映射到 React Doctor 规则的问题绝不允许自行编造修复方式。正确做法是复制经过评审测试reviewer-tested的规范配方——从规范提示词https://www.react.doctor/prompts/rules/plugin/rule.md获取或本地运行npx react-doctorlatest rules explain rule“精确的修复不属于你近似表达的范围规范提示词才是。”The exact fix is not yours to approximate; the canonical prompt is.这一原则在源码中有明确的实现支撑。has-published-fix-recipe.ts 定义了“某条诊断是否有已发布的修复配方”的判定谓词export const hasPublishedFixRecipe (diagnostic: PickDiagnostic, plugin | rule): boolean diagnostic.plugin react-doctor Object.hasOwn(REACT_DOCTOR_RULE_REGISTRY, diagnostic.rule);从源码结构看只有react-doctor命名空间且存在于REACT_DOCTOR_RULE_REGISTRY注册表中的规则才算“有已发布配方”合成环境检查如require-reduced-motion和借用的第三方插件eslint、unicorn、react-hooks-js等没有配方。该谓词的作用是门控“去取修复配方”这一指令——避免把 Agent 引向一个 404。换句话说AUDIT.md 中“never invent the fix”的原则在工具侧是以注册表成员关系来机械化保障的。rules explain子命令本身由 rules.ts 实现RulesExplainOptions支持--json输出规则不存在时统一报错并提示react-doctor rules list查看完整目录。审计者引用某条规则 id 后用户即可用这条命令本地复现同样的规则说明与修复理由。二、杠杆率Leverage审计发现如何排序AUDIT.md 为所有类别设定了统一的排序公理从用户影响和执行频率来评估杠杆率而不是只看规则的原始严重级。Judge leverage from user impact and execution frequency, not from the rules raw severity alone.并给出了具体校准高杠杆意味着缺陷位于共享路由、高频交互或带状态的列表上而不是死代码或极少触达路径上的理论问题。这一判断直接决定了后文每个类别内部的优先级。配套的 SKILL.md 进一步把它形式化为 HIGH/MEDIUM/LOW 三档详见第七节并要求每条发现都在其file:line处人工复核后才允许呈现。三、类别 1Bugs correctness缺陷与正确性覆盖范围该类别覆盖所有可能渲染错误 UI、丢失状态、产生过期数据或破坏 React 渲染模型的行为。高杠杆的缺陷是出现在共享路由、热交互或带状态列表上的缺陷——而不是死代码里理论上存在的问题。应狩猎的规则Hunt for规则问题描述no-array-index-as-key数组索引用作 key插入和重排会把状态错误地挂到别的行上no-random-key随机值用作 key每次渲染都会重新挂载该条目jsx-key列表中缺失 keyReact 无法可靠地对兄弟节点做协调reconcileexhaustive-deps缺失 effect 依赖闭包观测到过期状态no-self-updating-effecteffect 更新自己的依赖项形成反馈循环no-set-state-in-render渲染期间更新状态有渲染循环风险no-uncontrolled-input非受控输入的值受控行为发生漂移rendering-conditional-render数字出现在前面会渲染出多余的0扫描之外Beyond the scan静态扫描不覆盖、需要人工/Agent 嗅觉的部分包括异步竞态async races、卸载时的取消逻辑cancellation on unmount状态机中不可达/不可能的状态迁移需要回滚的乐观更新optimistic updates判断某个 effect是否应该放进事件处理器而非 effect检查易失败或加载敏感的子树是否缺少error 边界与 Suspense 边界。四、类别 2Performance性能覆盖范围该类别覆盖在渲染、布局、主线程或网络上被重复执行的工作。杠杆率 影响面 × 频率 × 扇出逐按键响应的编辑器、Provider、或万行级列表其优先级高于设置对话框里出现同一模式。不要仅仅因为某条规则可以被满足就去优化冷路径。应狩猎的规则Hunt for规则问题描述jsx-no-constructed-context-values不稳定的 context provider 值Provider 一渲染所有消费者都可能重新渲染jsx-no-new-object-as-prop作为 prop 传入新对象字面量jsx-no-new-array-as-prop作为 prop 传入新数组字面量jsx-no-new-function-as-prop作为 prop 传入新函数no-inline-prop-on-memo-component内联 prop 使memo()失效rerender-dependencies不稳定的值在每次渲染时重建no-layout-property-animation对布局属性做动画no-transition-alltransition: all会动画化非预期属性扫描之外Beyond the scan前后对照 Profiler 采样profile before and after狩猎context 扇出、昂贵 selector、请求瀑布waterfalls、缓存未命中、图片与 bundle 成本识别可以移到服务端或 transition中的工作拒绝冷路径上的过早useMemo/memo优化可能只是噪音还会引入依赖数组隐患、让代码更难读懂。五、类别 3Accessibility可访问性覆盖范围该类别关注键盘、屏幕阅读器、缩放及其他辅助技术用户能否发现并操作界面。杠杆率在主导航、表单、对话框和每次会话都会用到的控件上最高审计时要验证语义与交互上下文而不是无脑把规则静音。应狩猎的规则Hunt for规则问题描述alt-text图片缺失 alt 文本control-has-associated-label控件缺失可访问标签click-events-have-key-events点击处理器缺少键盘处理器no-static-element-interactions在静态元素上绑定交互prefer-tag-over-role用 role 替代了原生 HTML 标签no-autofocus元素上存在 autofocusno-outline-noneoutline:none移除了焦点环no-disabled-zoomviewport 上禁用了缩放扫描之外Beyond the scan静态检查通过不代表可访问需要真机/真实流程验证实际 tab 顺序、对话框关闭后的焦点归还键盘escape行为与roving focus轮值焦点live-region 播报、加载与错误状态下的可达性真实主题下的对比度、减少动态效果reduced motion支持触摸目标尺寸、200–400% 缩放下的表现AUDIT.md 特别警示一个“静态上有效”的标签在产品流程里仍可能是误导性的。六、类别 4Security安全覆盖范围该类别覆盖让攻击者可控数据变成代码、权限、秘密或危险浏览器行为的代码与配置。杠杆率在信任边界上最高客户端/服务端转换、鉴权、上传、HTML 注入汇点sink、重定向、特权变更。要追踪数据的完整流向而不只是看语法。应狩猎的规则Hunt for规则问题描述no-danger原始 HTML 注入可能执行不安全的标记dangerous-html-sink携带动态内容的 HTML 注入汇点jsx-no-script-urlJSX 中出现javascript:URLjsx-no-target-blank针对已声明的旧浏览器或 Electron 目标时target_blank链接不安全no-evaleval()执行不可信代码字符串no-secrets-in-client-code客户端代码中存在秘密密钥/凭据auth-token-in-web-storage认证 token 存放在 web storage 中untrusted-redirect-following服务端 fetch 跟随了调用方形状 URL 的重定向扫描之外Beyond the scan服务端验证授权authorization、租户隔离CSRF 与 origin 检查、CSP 与 cookie 标志位上传与content-type 处理、速率限制、依赖信任、日志脱敏AUDIT.md 给出关键警示在一个汇点做了消毒并不代表不可信的值在另一个汇点就是安全的——要把它一路追到数据源与特权效果处。七、类别 5Maintainability architecture可维护性与架构覆盖范围该类别覆盖那些让变更变得高风险、约定变得不清晰、归属与渲染行为难以推理的结构。这里的杠杆指“跨团队的重复成本”或“组件的中心性”——而不是对抽象的偏好也不是低风险的风格挑剔。应狩猎的规则Hunt for规则问题描述no-giant-component巨型组件难以阅读和修改no-nested-component-definition组件定义在另一个组件内部no-many-boolean-props布尔 prop 组合难以测试prefer-module-scope-static-value静态值在每次渲染时重建prefer-module-scope-pure-function纯函数在每次渲染时重建no-event-handler事件逻辑被放在了 effect 中处理no-mirror-prop-effect通过 effect 把 prop 镜像进状态design-no-vague-button-label含糊的按钮文案扫描之外Beyond the scan检查归属边界、公共组件 API、context 设计、依赖方向、测试接缝、重复的领域逻辑以及抽象是否在传达意图狩猎缺失的 error/Suspense 边界、职责过重的 Provider、可做的乐观 UI 机会、过早的 memoizationAUDIT.md 的收尾告诫不要为了凑指标而拆分组件或新增 hook。八、Working rule手册的运行规则与审计工作流闭环AUDIT.md 以 “Working rule” 一节收束全部方法论包含两条互补的职责划分扫描提供证据资深审计提供杠杆与上下文The scan supplies evidence; the senior audit supplies leverage and context——两者不可互替对每一条基于规则的计划取回规范提示词、引用当前代码、把精确的目标配方内联进去对每一条扫描漏掉的改进机会missed opportunity必须与诊断性发现分开标注并说明“什么样的运行时或产品证据能确认它的价值”。这与同目录两份文档构成完整闭环SKILL.md 定义了四阶段工作流与调用变体quick/standard/deep三档 effort、按类别聚焦、plan description直接写单个计划、execute plan派发给执行 Agent、reconcile让plans/与当前代码对齐。其复核Vet阶段的严重级标准就是 AUDIT.md 杠杆原则的显式化HIGH——把 bug 发给用户或劣化每一次会话过期闭包/缺失依赖 bug、对不可信输入用dangerouslySetInnerHTML、不稳定 Provider 值导致全树重渲染、逐按键组件上的渲染路径分配、主控件缺失可访问名称MEDIUM——明显错误但影响有界温路径非热路径组件上的不必要重渲染、key 稳定性缺失、本应是事件处理器的 effect、次级 UI 的 a11y 缺口LOW——打磨与卫生死代码、重复逻辑、冷路径 memoization、可维护性小疵。PLAN-TEMPLATE.md 规定了每个发现对应一份NNN-short-slug.md计划的固定结构Problem逐处引用path:line并逐字贴出现有代码、Target从规范提示词取回的精确目标代码绝不近似、Repo conventions to follow模仿一个具体示例文件、Steps、Boundaries不改公共 API、不加依赖、代码漂移即停下汇报与Verification机械验证 行为验证# 计划的机械验证标准目标诊断消除且分数不回归 npx react-doctorlatest --scope changed对性能类计划行为验证中Profiler 前后对照与 React DevTools 的 “Highlight updates” 观察是不可省略项。九、小结证据、杠杆、精确配方三件套AUDIT.md 把一次 React 代码库审计压缩成三条可执行公理证据来自扫描——规则 id file:line是审计发现的最低事实单位且必须逐条复核刻意保留的 disable 注释、被关掉的规则、有文档记录的权衡都应被尊重而非上报排序来自杠杆——用户影响 × 执行频率而非规则的原始严重级五个类别正确性、性能、可访问性、安全、可维护性分别定义了各自的“狩猎清单”与“扫描之外”嗅觉清单修复来自规范配方——能映射到 React Doctor 规则的发现其目标代码必须取自rules explain/ 规范提示词中经评审的配方在工具侧由hasPublishedFixRecipe这类谓词按规则注册表成员关系门控确保 Agent 不会被引向不存在的配方。这三者叠加 SKILL.md 的四阶段工作流与 PLAN-TEMPLATE.md 的自包含计划格式构成了improve-react技能“强模型做判断、弱模型做执行”的分工基础也是审计大型 React 代码库时可以直接照搬的完整方法论。【免费下载链接】react-doctorYour agent writes bad React. This catches it项目地址: https://gitcode.com/GitHub_Trending/re/react-doctor创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表