Skip to content

Latest commit

 

History

History
396 lines (250 loc) · 32.1 KB

File metadata and controls

396 lines (250 loc) · 32.1 KB

第一章:序言与战略定位

1.1 背景与愿景

背景

多年来,NutUI 组件库秉持着与京东设计一致、符合业内开发规范的原则,一直在演进并推动在站内的应用,截止到目前为止,已覆盖 Vue、React、RN、Flutter、iOS及安卓原生等,在web前端工程师与原生工程师之间,已默默搭起了一套桥梁,这也为后来一码五端奠定了可行性,成为了站内事实的组件标准。

为此,本文主要以 NutUI 这个主体展开白皮书的内容,为大家更好的理解、共建组件库提供方便的文档参考。

愿景

NutUI-React 起步于京东站内庞大、复杂的移动端业务场景,经过多年来的版本迭代与重构,现已发展成为一款专为移动端打造的轻量级、高性能 React 组件库。在当前前端业务日益复杂、展示终端百花齐放的行业背景下,其核心愿景依然坚定:提供一套具备京东App极致体验、高度可定制且完美支持跨终端(H5、微信小程序、京东小程序及鸿蒙、iOS、安卓系统等)的 UI 级基石解决方案。

我们希望,在提供各类组件的同时,也能向业务开发者输出一套清晰、具备落地性的“搭建法则”和最佳实践。本白皮书即是这套“法则”的完整提炼。

1.2 白皮书制定目的与核心受众

本白皮书针对 NutUI-React 的所有核心维护者、业务线使用者及开源社区的独立贡献者。

  • 对齐技术认知与消除摩擦:确保来自不同背景、不同业务线的开发者,在参与 NutUI-React 维护及基于其开发业务时,拥有统一的设计理念与严格的技术执行标准。
  • 系统性保障交付质量:通过推行严苛的工程化规范、显式的代码约束和强制的质量卡点(如测试覆盖率红线),确保交付到开发者手中的每一个组件结构,在稳定性和渲染性能上均达到业界一流标准。
  • 繁荣并规范开源生态:降低贡献者参与框架共建的门槛,为其提供清晰的参与路径,从而构建健康、可持续的高质量开源社区生态。

1.3 规范体系边界与约束等级

为了保障本准则在实际工程落地与代码核查中的可执行性,防止出现模棱两可的代码审查(Code Review)分歧,我们定义了清晰的边界与强制力等级。

1.3.1 体系边界

规范主要管控组件的交互一致性、视觉标准化、代码鲁棒性及多端自适应能力。而具体的业务逻辑实现、后端数据接口封装及第三方状态管理工具的深度集成,则不属于本规范约束的范畴。

1.3.2 约束词汇等级与执行

本白皮书的工程执行细则引入三级强化约束机制,并对接不同的工程卡点:

  • 必须(MUST)—— 底线红线
    • 含义:若不满足此类准则,则视为存在缺陷,代码无法通过 CI,合并请求(PR)必须打回。
    • 执行方式:强拦截。通过 EslintPrettiervitest 阈值等自动化工具强制执行。
  • 建议(SHOULD)—— 最佳实践
    • 含义:原则上必须遵守。若因特殊终端兼容性(如鸿蒙特定限制)无法遵守,需在 PR 中显式报备并由 Reviewer 确认。
    • 执行方式:人工介入。在 Code Review 阶段通过《PR 审查清单》逐一核实。
  • 可选(MAY)—— 优化引导
    • 含义:非必须实现的特性。鼓励贡献者在保障核心功能之余,进行体验或性能上的极致追求。
    • 执行方式:引导与激励。作为优秀代码示例在社区进行推荐。

第二章:组件库核心技术演进与架构总结

2.1 架构体系演进简史

NutUI 的演进伴随着移动端技术的演进,从移动端到跨端,从 Vue 到 React,成为了业内移动端与跨端组件库的代表。

当前的 React + Taro 的双架构模式,通过抽象的文件系统和目录结构编排设计,既实现了 H5 端基于原生 React Hooks 和 DOM 极速更新机制的极致性能与体验,又借助 Taro 多端框架体系内的 AST 转换与运行时桥接能力,赋予了通用组件“一次编写,多端运行”的降维覆盖能力。

2.2 核心特性与技术壁垒盘点

基于组件库的现实演进结果,我们总结了当前 NutUI-React 在市面上建立的五大核心技术壁垒与特性:

  1. 高密度且广阔的业务场景覆盖度:目前已经高度沉淀并发布了超过 70 个高质量底层基础组件。组件类型横跨基础展示(Icon、Button)、表单录入交互(Input、Picker)、灵活的导航控制逻辑(Tabs、Elevator),以及高复杂度的直面业务级线材实现(诸如购物车商品流、时间日历规划器等)。
  2. 极速与克制的运行时性能体验:全方位支持现代构建打包工具(Webpack、Vite)的深度 Tree-Shaking 按需引用的加载机制。极大地克制组件包依赖,消除冗余代码;同时,核心架构针对 React 18+ 提供的并发特性做了适配,并为服务端渲染(SSR)进行了代码安全前置考量(避免在组件初始化阶段污染 BOM/DOM 对象)。
  3. 多态化与松耦合的主题架构(Themeable System):全套采用纯粹的 CSS Variables(CSS自定义属性)介入机制体系,将曾经依赖构建工具如 Sass 变量运算才能完成的主题替换、暗黑模式切换等庞大工程,直接降级转化为纯碎无感的浏览器运行时级赋能。极大地降低了不同业务系统(B端、C端)接入定制系统的主题改造成本,可实现“千人千面”、“一键换肤”。
  4. 严密且可视化的质量防御体系:全库实现了超过 90% 的单元高测试覆盖率。这不仅是对外宣传上的冰冷数字,更是我们在面临大型 React 升级或者底层组件重构时的安全气囊和信心底牌。
  5. 基于自动化和约定优于配置的分包与文档自生长:我们利用深度自研和改造的 Node.js 工具链,让庞大的 Markdown 组件说明文档、React 组件 Props 的 TS 类型自动生成、多端代码之间的桥接,实现全链路自动化,极大地释放了核心团队维护说明与样例的人力投入。

第三章:设计系统与视觉交互规范(Design System)

所有的底层代码逻辑与工程架构体系,最终都必须也且只服务于终端用户的人机交互体验。NutUI-React 的视觉与交互基准从历史中来,完全源自于 京东 APP 15.0 系统化视觉设计规范,并在此基础上为通用性作出了提炼拓展。

3.1 Design Tokens (设计令牌与变量系统)

在组件开发中,核心开发者和贡献者必须彻底摒弃传统的物理魔法数字、硬编码十六进制色值或不确定的像素宽带单位。一切后续迭代扩展和开发中,必须唯一引用系统内建及扩展出的 Design Tokens

  1. 三级降阶提取体系架构: 在底层的 SCSS 体系中,严格遵循 Global Tokens (全局抽象跨越组件的底层变量) -> Alias Tokens (别名场景映射) -> Component Tokens (组件自身强相关的私有变量) 的三级递推。
    • 例如:全局品牌色 --nut-primary-color,可延伸至按钮内部重命名使用为局部特性 --nut-button-primary-background-color
  2. 语义化色彩的应用绝不妥协: 所有的背景色、边框色、字符色应用必须赋予其内在语境意义。常见的包括 Primary(主品牌色彩与主要核心引导交互)、Success/Warning/Danger(强有力的系统级状态和警报传递意图)等。绝对禁止在组件样式文件 *.scss 中直接撰写如 #fa2c19,必须以类似 color: var(--nutui-color-primary, #fa2c19); 这种携带兜底机制的标准变量落点存在。

3.2 交互与运动学基因原则 (Kinetics & Motion)

移动端设备不同于桌面设备,用户的反馈链短切要求即时响应。组件体验必须是“连贯的”和“丝滑的灵动感”。

  1. 交互反馈状态全闭环处理优先: 所有的存在点击或长按触发的交互控件(如 Button 按钮, Cell 列表项组件等)必须包含一套完整的反馈状态视觉闭环处理,显式化处理包括不仅限于 :active 伪类(常用于承当移动端特有的按下触探轻反馈)、和业务逻辑锁死的 disabled 状态(及其禁用的样式展示)、组件异步操作所致 loading (内部转场及防止多次冗长请求等)。
  2. 多终端动效参数高度体系化与归一化: 动效(Motion)的过度持续时间 (Duration) 及其呈现缓动贝塞尔曲线函数 (Timing-function) 应遵循本团队建立的预设时间曲线。
    • 轻量级的微交互元素状态改变(如元素的 Hover、按钮被按压时的 Active 等)其响应时效长应约束在 150ms-250ms 的反应弧内。
    • 而存在层级关系的重度的全屏视图级覆盖/遮罩弹窗组件切换展开则须具备平稳过渡体系,推荐采用 300ms 左右的线性延展或缓出速度曲线。 (以上数值均须通过系统预制的 SCSS transition-duration 的基准类名及混入系统进行取参调用)。

第四章:多端架构演进与代码结构标准

多端同构与按需输出是本组件库最深度的独特性,也是其最大难点和挑战,为此,制定了以下结构性规范,以防止组件底层架构陷入快速腐化陷阱。

4.1 Monorepo 管理边界与极度克制的目录结构设计

为了使得用于纯粹面向 Web 的 H5 架构代码,和须被 Taro 开发依赖的小程序业务代码等能够被在一个 npm Package 或模块内实现深度有机结合、同时互相独立复用(彼此绝不包含不可执行逻辑),我们采用了强隔离的双文件同构同名多产物策略

任何单个 NutUI-React 组件的目录结构下,严格限定了最基本要求必须且不仅包含以下核心业务的骨架内容(以 Button 举例):

  • button.tsx: 主要面向原生 Web(通常被称为 H5 端)环境的 React Hooks 特性及其虚拟 DOM 渲染树的原生实现。
  • button.taro.tsx: 这是必须单独提供、基于 Taro 面向非 Web 编译环境生态圈彻底重构(或部分 API 桥接调整后)的跨端实现代码。在 Taro 组件实现中严格杜绝所有直接或者底层的真实 DOM 的直接抓取和写入操作(document.querySelector 完全属大禁),必须采用小程序的抽象标签语义化包装实现(比如使用 <View> 代替 HTML 中非语义的 <div> 操作)。
  • button.scss: 此为需要贯通和统一多端的唯一真实样式源文件。在其中对于特殊设备布局的强要求是:只采用及尽量使用诸如 Flex 或者现代的 Grid 网络等能够保证多终端/跨浏览器表现一致的 CSS 现代盒模型布局模式。
  • demo.tsxdemo.taro.tsx:用于配套的,分别支持官方文档和移动端预览生成的样例调试场景代码,是向外传达用法的第一窗口,必需严格保证正确性。
  • doc.md / doc.en-US.md / doc.taro.md:不同语言和环境的详细 API 文档说明等。

第五章:React 核心组件开发范式与规约

面对具有声明式哲学但极易因为乱用特性而发生性能坍塌灾难的 React 系统,我们给出不可触碰和必须遵循的执行范式框架:

5.1 Props 规范与向下兼容策略

  1. 统一基础属性继承: 定义组件 Props 前,**必须(MUST)**继承全局抽象类型 BasicComponent(或 MiniProgramBasicProps 等多端公共类型),确保组件基础能力的统一。

  2. 强类型声明与规范

    • 禁止 any:Props 参数需使用显式联合类型,严禁使用 any 逃避类型检查。
    • 事件命名:对外事件统一以 onXXX(小驼峰)命名。
    • 精简通信:事件通信仅传递必要数据,避免携带冗余的组件实例或私有变量。
    • Ref 导出:通过 Ref 抛出的函数须采用动词起首的指令式命名(如 close(), play())。
  3. 样式透传与覆写 (Overwrite)

    • 必选逃生口:根节点渲染时,**必须(MUST)**支持透传外部传入的 classNamestyle
    • 类名合并:推荐使用 classnames 库合并内部与外部样式,确保开发者能灵活定制外观。

5.2 Refs 透传机制

  • 强制 forwardRef:所有组件必须使用 React.forwardRef 包裹,确保能正常透传 Ref 引用。
  • 保护性暴露:支持高阶组件集成及指令式操作(如手动唤起弹窗、聚焦等)。
  • 受控 API 暴露:若需暴露内部方法,应配合 useImperativeHandle 仅抛出必要的 API 指令。

示例结构:

export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>((props, ref) => { ... })

5.3 Hooks 与数据不可变原则

  1. 计算备忘 (useMemo): 复杂逻辑或昂贵的 UI 计算结果必须使用 useMemo,减少父组件更新导致的重复计算卡顿。

  2. 函数持久化 (useCallback): 传递给深层嵌套子组件的回调函数,须使用 useCallback 稳定引用,防止子组件无意义的重渲染。

  3. 不可变更新 (Immutable): 严禁直接修改私有状态。必须采用“副本替换”模式(如结构赋值)产生新对象/数组,确保状态可追溯且符合 React 渲染机制。

5.4 组件防御与容灾红线

  1. 防阻断式崩溃

    • 针对入参异常、异步失败、逻辑边界等风险点,必须内置 try-catch 或提供兜底 UI。
    • 组件内部错误不得外溢导致整个前端应用白屏死机。
  2. 禁止越权行为

    • 禁止全局拦截:组件严禁私自内置 Error Boundary 接管系统错误。
    • 禁止私自追踪:严禁在基础组件内内置埋点、错误上报 SDK 或任何侵入业务方的监控行为。

第六章:多端适配与降级策略

多端开发的核心挑战在于应对宿主环境的分裂。本章旨在规范跨端适配逻辑,确保代码在不同环境下的可维护性与健壮性。

6.1 平台私有特性处理规范

在针对特定宿主环境(如鸿蒙专属系统交互、特定小程序 API)实施私有特性时,必须遵循“逻辑解耦”原则,防止平台差异代码侵蚀核心业务逻辑。

核心准则:

  1. 禁止“面条式”硬编码:严禁在组件主脉络中直接堆砌大量的 if (env === 'WECHAT') ... 等环境判断语句。此类写法会导致代码难以维护,并造成工程体量失控。
  2. 抽象适配层 (Adapter):将平台相关的底层执行模块或交互逻辑提取到独立的适配层中,通过专用接口或方法进行桥接,实现业务逻辑与底层环境的无害化隔离。
  3. 条件编译自动剪裁:充分利用构建环境(Webpack/Vite)的条件编译能力(如识别 __TARO_ENV 变量),在编译阶段自动剪裁非目标平台的代码模块,确保产物精简且物理隔离。

6.2 特性缺失的降级与静默处理 (Fallbacks / Silencing)

当组件的某项特性在目标端缺乏底层支撑时,应遵循以下降级逻辑:

  1. 平滑补偿:优先设计降级表现方案,确保视觉或交互体验的连贯性。
  2. 静默容错:若物理条件导致特性完全无法实现且无降级方案,应采取“忽略策略”,确保程序逻辑不中断、不崩溃,严禁因非核心特性缺失导致应用白屏。

第七章:现代前端工程化标准与工作流

在现代化组件库的建设中,60% 的核心重任在于底层工程架构的统筹与自动化流水线的建立。只有构建好这套“骨干”,剩下 40% 的具体业务代码产出才能如同精准执行的模块搭建。

希望可以通过 TS 类型堡垒 确保逻辑的健壮性,通过 BEM 规范 确保样式的稳定性。这种“标准化驱动”的工作流能够将开发者从琐碎的维护中解放出来,专注于组件逻辑的高质量产出。

7.1 TypeScript 类型堡垒:全维度静态防御

为彻底杜绝代码隐患,必须构建 100% 覆盖的 TS 防御体系,严禁“降级”开发行为。

  • 零容忍 any 与 强制断言
    • 严禁为了追求开发速度而滥用 any
    • 严格限制 as unknown as Type 等强制类型扭转操作。
    • 所有组件接口、方法入参、返回载体必须经过精准的类型标注与推理设计。
  • 公共服务的“防爆墙”设计
    • 封装隔离:在 index.ts 等入口文件中,对对外暴露的 PropsEvent 接口进行统一归口管理。
    • 自说明文档(JSDoc):所有公开接口必须配载详尽的 JSDoc 注释,标明使用场景、边界条件与注意事项。
    • 自动化补给:利用自研脚本提取代码中的类型与注释信息,实现线上官方文档的自动化生成,确保代码即文档。

7.2 BEM 命名规范:样式结构的抽象法则

为解决传统 CSS 命名空间缺失、易引发全局样式污染的痛点,组件库强制执行 BEM (Block Element Modifier) 方法学。

核心概念 定义与职责 命名示例与规范
Block (块) 独立的功能实体,组件最外层包裹环境。 使用统一前缀,如 .nut-button
Element (元素) 依赖于 Block 的内部子组成部分,不可脱离块独立存在。 使用 单连字符 连接:.nut-button-icon
Modifier (修饰符) 定义 Block 或 Element 的不同状态、版本或外观变体。 使用 单连字符 连接:.nut-button-primary

落地细则:

  1. Block 独立性:每个组件必须拥有唯一的标识性前缀(如 nut-),确保样式在任何业务环境下具有“隔离防护性”。
  2. Element 从属性:通过 - 明确层级关系,严禁出现三级以上的嵌套(如 .a-b-c 是错误的),保持结构的扁平化。
  3. Modifier 语义化:修饰符仅用于描述状态(如 activedisabled)或规格(如 smalllarge),不得用于构建基础结构。

第八章:AI 在组件库架构与研发生态中的演进探索

组件库的未来不仅在于端侧能力的扩展,更在于研发效率与生态的智能化革新。NutUI-React 将通过引入大模型 (LLM) 与 AI Agent,将 AI 深度植入开发、维护及消费全链路,构建智能化组件库新形态。

8.1 研发效能增强:自动化文档与测试体系(Doc & Test Agent)

  • 现实痛点:维护 80+ 组件的多语言文档、交互 Demo 以及高覆盖率(90%+)的单测极其耗费精力,是拖慢迭代节奏的主因。
  • 实施路径
    1. 大模型驱动的 JSDoc 文档自动补偿:基于 *.tsx 严格的 Props 类型系统,利用 AI 解析上下文语义。自动生成中英双语参数描述、边缘情况警告,并结合 CI 流水线在 PR 提交前进行智能化校验与文档补全。
    2. 测试用例(Vitest)自生成:利用 RAG(检索增强生成)技术读取仓库既有测试规范。当检测到新增组件或 Hooks 时,自动产出涵盖常规路径(Happy Path)与非法入参验证的单测基片,开发者仅需微调确认,预计可节省 50% 以上的开发成本。

8.2 赋能业务消费方:智能物料与代码助手(Local UI Copilot)

  • 现实痛点:传统“查阅文档 -> 拷贝代码 -> 手动拼装”的链路存在严重断层,业务方接入组件库的学习成本较高。
  • 实施路径
    1. 专精化 IDE 插件引擎:将 NutUI-React 源码结构、Design Tokens 限制及 BEM 规范整合为知识库,构建专用的 IDE Copilot。在业务开发中实现高命中的组件导入预测与参数补全。
    2. 自然语言驱动的 UI 生成(Text to UI):在文档站集成意图理解能力。支持通过自然语言(如:“生成一个带滑动删除的商品购物车单元”)自动调度基础组件(Swipe, Cell, InputNumber)进行逻辑拼装,直接产出符合工程标准的 React 代码块。

8.3 防御性治理:智能架构审查与风险预警(AI Reviewer)

  • 现实痛点:核心团队难以 24 小时保持高强度审查,且人工难以完全规避细微的代码规范冲突。
  • 实施路径: 在 GitHub Actions 流程中引入 AI Reviewer,对每个 PR 进行深度扫描与风险拦截:
    1. 规范背离拦截:强力识别并拦截违反 BEM 命名法则、在样式中硬编码(Hardcoding)色值等破坏系统一致性的行为。
    2. 跨端架构一致性监测:针对 Taro 与 H5 的双代码基建,自动比对 API 接口层。若 button.tsx 新增逻辑而在 button.taro.tsx 中未实现对等匹配或降级补偿,系统将立即报警并打回,将不一致性风险扼杀在合并阶段。

经此,AI 在 NutUI-React 生态中的角色正从**“辅助生成”转向“规范管控”**。通过 Doc & Test Agent 释放人力,Copilot 降低门槛,AI Reviewer 守护底线,最终实现从代码编写到生态消费的全链路智能化闭环。

第九章:坚如磐石的质量保障体系 (QA)

作为广泛依赖的基础设施,任何微小缺陷都会在业务线中被无限放大。NutUI-React 设定了极其严苛的自动化与流程化质量体系,以确保底层基石的稳固。

9.1 测试驱动:坚守 90% 覆盖率的红线

不可无测试发版。新增组件或大规模重构必须守住 90% 以上的功能分支覆盖率。

  • 异常与边界防御:测试重点不仅在于主流程(Happy Path),更在于防御性场景。包括:非法属性入参的平稳恢复、高并发触发下的防抖/节流处理、以及组件销毁时事件监听的强制卸载。
  • 精准 UI 断言:利用 Vitest 矩阵,对 DOM 核心节点及交互状态(如 Loading 图标的显隐)进行像素级的状态判定。

9.2 严苛的性能预算限额 (Performance Budget) —— 2026 标准版

针对移动端设备的硬件长尾效应,NutUI-React 参照行业顶尖标准,将性能指标从“固定上限”进化为“分级动态限额”。

1. 包体积预算:从“单体体积”到“树摇 (Tree Shaking) 效率”

业内标准(如 Ant Design)极其关注原子化体积。我们不应只看总包,更要看业务方引入单一组件时的增量。

指标 业内对标 (Benchmark) NutUI 严苛标准 (Limit)
原子组件增量 < 5KB (Gzipped) ≤ 3KB (如 Button, Icon)
复合组件增量 < 30KB (Gzipped) ≤ 20KB (如 Picker, Calendar)
Tree Shaking 损耗 < 10% ≤ 5% (禁止任何副作用 Side Effects)
  • 标准升级:所有组件必须通过 size-limit 监控。若新功能导致 Gzip 体积增量超过 500B,必须在 PR 中提交体积膨胀说明。

2. 运行时预算:基于 RAIL 模型的感知阈值

参考 Google 的 RAIL 性能模型,组件的响应必须符合人类直觉的生理极限。

  • 交互响应 (Response):从用户点击到组件视觉反馈(如波纹效果或状态切换),必须在 50ms 内完成,确保极速手感。
  • 动画流畅度 (Animation):所有过渡动画(如 Drawer 弹出)必须稳定在 60fps。折合每帧渲染时间 ≤ 16.6ms(高刷屏设备要求 ≤ 8ms)。
  • 长列表滚动 (Jank-free):在百级数据下,滚动时的脚本执行时间(Scripting Time)不得连续超过 2 帧 (32ms),防止掉帧。

3. 渲染效率:虚拟化与时间分片 (Time Slicing)

针对复杂组件,我们引入 React 18+ 的并发特性指标:

  • 渲染中断时长:单个组件的同步渲染(Blocking Render)时长不得超过 100ms。超过此阈值的复杂计算必须使用 useTransitionuseDeferredValue 降级,避免阻塞主线程。
  • 虚拟化强制令:对于 List、Table、Tree 等容器类组件,当数据量超过 50 条时,必须强制开启(或提供)虚拟滚动 (Virtual List) 方案。

4. 内存与稳定性:防患于“泄露”未然

内存预算不仅是总量控制,更是对“增长曲线”的监控。

  • 内存增量红线:连续操作组件(如反复打开/关闭 Modal)10 次后,堆内存(Heap Size)增量应 < 1MB
  • 对象持有检查:严禁在全局作用域持有组件实例。卸载后,组件关联的 DOM 节点必须被完全垃圾回收(通过 Chrome DevTools 的 Detached Elements 检查)。

5. 自动化性能监控流水线 (Performance CI)

为了让上述标准不沦为纸面文档,我们强制执行以下流程:

  1. Lighthouse CI:在预览环境下自动跑分,性能(Performance)分值低于 90 自动拦截合并。
  2. Chrome Trace Bot:利用自动化脚本模拟用户操作,抓取 long tasks 指标,若 PR 引入了超过 50ms 的 long task,则触发报警。

9.3 绝对防御:硬核前端安全红线

作为底层框架,组件库必须为业务方构筑第一道安全屏障:

  1. 注入攻击防护:涉及外部输入渲染的模块(如富文本 Props),必须内置严格的 XSS 转义过滤与 URL 协议白名单检测,阻断恶意脚本渗透。
  2. 敏感信息脱敏:严禁在生产环境包中保留 console.log() 或带有框架内部特征的调试信息。所有关键路径必须具备异常隔离机制,防止底层调用特性被恶意探测。

9.4 拥抱无障碍体验 (Accessibility - A11y)

我们坚持让视障或运动障碍群体也能无障碍地使用 NutUI。

  • 语义化注入:所有组件强制支持 Web ARIA 标准属性。
  • A11y 落地准则
    • 视觉隔离:装饰性图标需显式标注 aria-hidden="true",避免读屏器冗余干扰。
    • 交互补全:无文本按钮必须具备 aria-label 描述词;表单组件须实时联动 aria-checkedaria-invalid 等状态控制标记。

本章所设立的覆盖率红线、性能预算、安全防御及 A11y 标准,共同构成了 NutUI-React 的质量围栏。这不仅是对代码负责,更是对千万级业务流量的底线承诺。

第十章:版本发布与代码审查规范 (CR)

代码是团队的集体财产,而非个人的艺术画板。NutUI-React 的审查规则旨在防范“破窗效应”,确保每一行合并进主干的代码都符合工程化基准。

10.1 严密的语义化版本模型 (SemVer)

所有发布必须严格遵循 SemVer 规范,确保版本号单向线性递增,严禁隐性变更。

  • 主版本号 (Major - x.0.0):仅用于架构级巨变或不可向后兼容的 Breaking Changes(如底层框架升级、核心 API 彻底重构)。
  • 次版本号 (Minor - 0.y.0):用于新增功能。如发布新组件、为主力组件新增向下兼容的 Props 或方法。
  • 修订号 (Patch - 0.0.z):仅用于缺陷修复 (Bugfixes) 与静默的性能优化,必须保证对业务方的完全透明与兼容。

10.2 生命周期管理:回退与废弃准则

  • 应急回退 (Rollback):若版本更新引发生产级灾难,必须在执行回滚的同时,同步发布公开回退声明,并归档事故追踪日志(Post-mortem),指引受影响的业务方平稳降级。
  • 克制的废弃 (Deprecation):禁止对陈旧组件进行“暴力砍除”。废弃流程必须分步执行:
    1. 标记:添加 @deprecated 标注,在控制台输出升级指引。
    2. 陪伴期:在接下来的一个完整 Minor 周期内,继续提供严重的 Bug 修复支持。
    3. 清退:仅在跨 Major 版本时,方可正式移除已废弃的代码。

10.3 PR 审查“三关口”核查法则 (The SWAT Checklist)

任何特性分支(PR)在合并前,必须由核心成员(Maintainer)参照以下准则进行强制审查:

第一关:自动化预审 (Pre-Review Auto-Check)

  • 语法与 Lintnpm run lint 无报错,命名符合 BEM 规范,无硬编码颜色/边距。
  • 类型安全npm run tsc 无类型错误,Props 继承自 BasicComponent,严禁 any 侵袭。
  • 测试覆盖率:自动化 CI 流水线绿灯,新增/修改代码的功能分支覆盖率必须 > 90%。

第二关:架构与多端一致性 (Core Architecture Review)

  • 多端对齐:确保 .tsx (H5) 与 .taro.tsx (Taro) 的功能实现、API 签名及交互体验高度一致。
  • 环境隔离:核实 Taro 实现中严禁使用原生 DOM API,且使用了正确的语义化标签(如 View 替代 div)。
  • API 设计:事件回调以 on 起首,属性命名符合语义描述,确保 API 具备良好的向下兼容性。
  • 物料同步:中/英/Taro 文档已同步更新,且配套的 Demo 示例代码能准确演示本次变更的特性。

第三关:性能、健壮性与安全 (Performance & Robustness)

  • 渲染效率:检查昂贵逻辑的 useMemo 及回调函数的 useCallback 缺失风险,避免无意义的重渲染。
  • 副作用管理:所有 useEffect 必须具备对应的 cleanup 逻辑(如解绑事件、销毁观察者)。
  • 容灾与安全:关键路径有错误捕获(Try/Catch)及防御性布局,无 console.log 等调试信息遗留,富文本类 Props 经过脱敏转义处理。
  • Ref 透传:底层组件通过 React.forwardRef 正确暴露了必要的内部实例或命令式方法。

本章不仅是发布指南,更是 NutUI-React 的**“基本法”**。通过严密的 SemVer 保护外部调用者,通过三道 CR 关口保护内部代码质量,最终实现组件库的长效健康。

第十一章:社区共建与未来演进 (Community & Evolution)

NutUI-React 的繁衍脱变离不开开源社区的支持与贡献。构建一套透明、高效的开源协同机制,是确保项目长青的核心方针。

11.1 Issue 处理与需求分流机制

为了平衡社区诉求与框架的通用性,所有问题反馈应遵循以下机制:

  • 缺陷限时响应:确认属于核心代码或兼容性设计的 Issue,核心团队将快速打标并分配处理,并在最近的 Patch 版本中发布补丁。
  • 需求研讨机制 (Discussions):对于非通用型组件或偏门特性的新增诉求,不再直接进入开发流,而是引导至 Discussions 区域进行场景合理性研讨。当需求具备充分的通用性并达成社区共识后,方可转入正式开发规划。

11.2 后续长期演进战略蓝图

组件生态的建设是一项长期工程。在夯实前十章所述的基础规范之上,NutUI-React 将在以下深水区持续探索:

  • 深度适配鸿蒙原生生态:超越目前的编译态适配,探索与鸿蒙底层设备特性的深度融合,实现真正的原生性能体验。
  • 全链路响应式与大屏适配:打通跨端(折叠屏、Pad、桌面端)的布局边界,提供更智能的响应式布局方案。
  • 业务域复合块 (Business UI Blocks) 建设:由原子组件向高阶业务块进化,提供具备完整业务逻辑内聚的领域级组件模版。

NutUI-React 期待与全球开发者共同打磨这款跨端利刃。标准的演进是一个动态迭代的过程,唯有敬畏规范、拥抱变化,才能确保代码库生命树的基业长青。


由于文章系统构建复杂,涉及广阔的工程边界,极具深度。上述白皮书全本(共十一章)现已涵盖组件标准最为基层的建设价值观理念、深度横向跨多端的复杂架构模型策略导向方案、纯粹的且苛刻的代码级防线开发要求的全部底线说明等。也指明了未来我们将面临且拥抱在包括诸如 AI 化提效大潮乃至拥抱原生生态的体系内演进化工程发展目标长久愿景。这是 NutUI-React 稳步行走向前的“基本法”。我们由衷期待并将继续见证更多的开发者以此书作为契机,投身加入到这片开源共荣生态建设,一同推动属于每一个人的 NutUI 体系走向远大前程。

状态:第一版 (最终稿) 编写团队:NutUI-React 核心自治委员会 维护预期:本标准具备即时约束力。在通过 PR/Merge 时将严格以此文件规约作为检验核心。