adobe/react-spectrum：一套库，三个层次，解决 React 可访问性难题
一系列库和工具，可帮助您构建自适应、可访问且可靠的用户体验。
秒懂
- 它是什么？
- React Spectrum Libraries 是 Adobe 开源的一套 React 组件与 hooks 集合，覆盖从设计系统实现到无样式行为层的完整链路。本文拆解其三层架构、实际用法与适用边界。
- 适合谁用？
- 如果你的团队正在从零构建自己的设计系统，且需要一套经过验证的无样式行为层，React Aria 和 React Stately 是值得优先评估的选项，它们把键盘导航、屏幕阅读器支持和跨平台状态管理封装成 hooks，省去大量自查 ARIA 规范的时间。如果你只是想要一个开箱即用的完整组件库，且不打算绑定 Adobe 的设计语言，React Spectrum 可能过于沉重，因为它强制引入 Spectrum 的视觉风格和主题系统，定制成本不低。
- 能商用吗？
- 可以。Apache-2.0 是宽松许可证：你可以使用、修改并销售基于它的软件，只需保留版权和许可证声明。
- 还在维护吗？
- 在维护。仓库最近一次提交在 1 天前。
- 用什么语言写的？
- 主要是 TypeScript（依据 GitHub 的语言统计）。
以上回答依据项目的 GitHub 数据（最近同步于 2026年9月15日）和我们的分析，不构成法律意见。
开源项目深度解析
它解决的是组件库最常见的三个坑
大多数 React 组件库把样式、行为和状态管理揉在一起，导致两个后果：想换视觉风格就得动组件内部逻辑，想复用到非 Web 平台就无从下手。react-spectrum 仓库把这三件事拆成独立库。React Spectrum 是 Adobe 设计系统的 React 实现，自带 Spectrum 的视觉规范。React Aria 提供无样式组件和 hooks，只管交互行为和可访问性。React Stately 则是一组跨平台状态管理 hooks，不依赖 DOM。这种分层意味着你可以只取其中一层，不必接受整套设计语言。对于要自建设计系统的团队，React Aria 的价值在于它把 WAI-ARIA Authoring Practices 的复杂规则封装成现成 API，省去逐条对照规范的时间。
三层架构如何各司其职
从仓库结构和文档描述看，数据流是单向的：React Stately 管理状态，React Aria 把状态映射为键盘、鼠标、触摸交互和 ARIA 属性，React Spectrum 再把这些行为套上 Spectrum 主题。以日期选择器为例，React Stately 的 useDatePickerState 维护日期值、开合状态和焦点管理，React Aria 的 useDatePicker 把这些状态转换成输入框的 aria-expanded、键盘事件处理等逻辑，React Spectrum 则提供带样式的 DatePicker 组件。这套分层让同一套行为逻辑能跑在 Web、React Native 甚至其他平台上，因为 Stately 不依赖 DOM。文档明确说 React Stately 可以独立使用，比如用于 React Native，这是它区别于其他组件库的关键设计。
从 README 能确认的实际能力
可访问性不是口号。README 明确列出组件按照 WAI-ARIA Authoring Practices 实现，包括完整的屏幕阅读器和键盘导航支持，并且宣称在多种屏幕阅读器和设备上测试过。自适应交互方面，所有组件同时支持鼠标、触摸和键盘，响应式设计原则贯穿始终。国际化是另一个强项，内置超过 30 种语言支持，包括从右到左的布局、日期和数字格式化。这些能力不是零散插件，而是作为库的基础特性打包。对于需要面向全球用户的应用，这意味着不需要额外引入 date-fns 或 react-intl 就能处理区域格式化，但代价是这些国际化逻辑是库自己实现的，与你的现有工具链可能需要磨合。
上手路径：按需选择，不是全家桶
README 给出了清晰的决策路径。如果你要集成 Adobe 软件或想要完整组件库，用 React Spectrum，安装后直接引入主题和组件即可。如果你在从零构建自己的设计系统，用 React Aria 的 hooks 和组件，自己写样式。如果你只需要跨平台状态管理，单独用 React Stately。实际安装命令在文档中，但仓库本身没有在 README 里给出 npm install 示例，需要去各子项目的 getting-started 页面查看。根据发布记录，react-aria-components 和 @react-spectrum/s2 是独立版本号，说明你可以分别升级，不必同步。这种模块化发布策略降低了单点升级风险，但也意味着你需要跟踪多个包的版本兼容性。
一个明显的限制：样式与设计系统的绑定
React Spectrum 作为完整组件库，其价值建立在 Spectrum 设计语言之上。如果你不接受 Adobe 的视觉风格，或者你的品牌规范与 Spectrum 差异很大，直接用 React Spectrum 会带来大量主题覆盖工作。文档提到支持自定义主题和自动暗色模式，但主题系统本身也是 Spectrum 的一部分，深度定制需要学习其 token 体系。相比之下，React Aria 完全不关心样式，它只输出行为逻辑和 ARIA 属性，样式由你掌控。但这也意味着你失去了开箱即用的外观，需要自己处理 CSS 变量、响应式断点等细节。对于只想快速搭一个内部工具界面的团队，React Aria 的学习曲线可能比直接用 React Spectrum 更陡。
替代方案：与 Headless UI 和 MUI 的实质差异
同类无样式组件库中，Headless UI 和 Radix UI 是常见选择。Headless UI 同样提供无样式组件，但它的状态管理逻辑和 React Aria 不同，后者把状态管理拆到 React Stately 中，使得状态逻辑可以脱离 DOM 复用，而 Headless UI 的状态管理通常与组件绑定。Radix UI 也提供无样式组件，但它的架构更偏向于封装好的行为组件，而非暴露 hooks 让你自由组合。React Aria 的 hooks 方式给了开发者更细的控制粒度，你可以只取 useListBox 的键盘导航逻辑，而不用接受整个组件的 DOM 结构。这种差异在需要深度定制交互细节时尤为明显，React Aria 更适合作为设计系统的基础层，而 Radix 更适合快速拼装。
维护成本与许可证考量
仓库活跃度可以从最近发布记录判断，react-aria-components 在 2026 年 7 月 31 日发布 v1.20.0，距离上一个版本约六周，说明维护节奏稳定。Apache-2.0 许可证对商业使用友好，允许修改和再分发，但需要注意 Adobe 的商标和设计资产可能受额外限制，虽然 README 未提及，但使用 React Spectrum 时若保留 Spectrum 视觉风格，需自行确认商标合规性。升级成本方面，由于包是独立版本，每次升级可能涉及行为变更，尤其是 React Aria 的 hooks API 在跨版本时可能有 breaking change，文档没有明确说明语义化版本策略，但 v1.x 的 minor 版本更新通常保持向后兼容。对于长期项目，建议锁定版本并关注 changelog。
编辑结论
如果你的团队正在从零构建自己的设计系统，且需要一套经过验证的无样式行为层，React Aria 和 React Stately 是值得优先评估的选项，它们把键盘导航、屏幕阅读器支持和跨平台状态管理封装成 hooks，省去大量自查 ARIA 规范的时间。如果你只是想要一个开箱即用的完整组件库，且不打算绑定 Adobe 的设计语言，React Spectrum 可能过于沉重，因为它强制引入 Spectrum 的视觉风格和主题系统，定制成本不低。在采用前，先确认你的 React 版本与项目构建工具兼容性，并实际用屏幕阅读器跑一遍核心交互，因为文档宣称的广泛测试覆盖并不能替代你目标用户群的真实环境。
社区笔记