边缘计算、人工智能和热成像

React Stately的大多数钩子就像带有不可变性的常规useState钩子一样。将其用于Web时，可以将其与React Aria配对以提供组件的可访问性和用户交互。就像React Aria一样，React Stately可以逐步实现。

总结

许多公司和团队只是没有资源来优先考虑诸如可访问性、国际化、全键盘导航和触摸交互等功能。我们中的大多数人都在忙于发布核心应用功能。

这就是为什么React Spectrum对许多团队如此有价值。这些库的设计让你可以在不同的设备上逐步将你的应用逻辑分享给许多组件。有了React Spectrum，你不必再投入时间和金钱去创建一个支持无障碍和国际化的设计系统。

 

除了所有好的基于组件的UI之外，React Spectrum还包括如何测试你用它构建的应用程序的指南，所以如果你有兴趣按照Adobe对其UI元素的设计来构建你的React应用程序，你不会后悔使用它。

React Aria如何工作

React Aria的主要目的是帮助你实现所有人在所有设备上的可访问性。这包括各种类型的残疾人：视觉，听觉，运动和认知障碍。

React Aria的伟大之处在于，每个钩子都被归纳在一个特定的包下，你可以单独安装。这将使你可以将钩子逐步地逐步引入到组件中。

React Aria有组件钩子，允许你在不同的设备上构建一致的非风格化组件，当然如果你想的话，你可以将其风格化。

例如，有一个useButton钩子，可以渲染一个具有以下功能的按钮：

• 原生HTML<button>支持
• <a>和通过ARIA支持的自定义元素类型
• 鼠标和触摸事件处理以及按状态管理
• 键盘焦点管理和跨浏览器标准化
• 键盘事件支持空格键和Enter键

这是实现钩子的方法：

 

它具有三个主要库，你可以根据需要将它们一起使用或分别使用：

• React Spectrum是Adobe设计系统Spectrum的一个实现。
• React Aria是一个钩子的集合，用于提供可访问的UI基元，如国际化和在所有设备上的一致交互。
• React Stately是钩子的另一个集合，但专注于启用跨平台状态管理

结合在一起，React Spectrum让你在开发Web应用时有了一个良好的开端，超越了最低限度的要求，提供了卓越的用户体验。

这篇文章将帮助你了解React Spectrum想要解决什么问题，以及如何开始使用它。

设计系统的问题

即使有React、Vue和Angular等现代前端库的帮助，要创建一个符合UI一致性、可访问性、国际化和可用性等高标准的Web应用仍然相当困难。这也是为什么如今设计系统如此流行的原因。

但是创建符合UI标准的设计系统既费时又费钱。从我的经验来看，我总能看到开发人员和设计人员把过多的精力放在组件风格上，而把可访问性和国际化排除在基础之外。当公司刚起步时，没人会考虑这些!

考虑到本地化工作的难度，这一点是可以理解的。你需要考虑字符串翻译，本地化日期和数字格式，启用从右到左的交互等等。

这就是为什么React Spectrum如此有价值的原因。它利用Adobe在设计和开发功能丰富的用户界面方面的经验，让你在实现所有这些琐碎的细节方面有一个好的开端，这些细节使得所有设备的用户体验都很好。

（编辑：鹰潭站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!