React Spectrum，Adobe的组件库和工具入门

React Spectrum是一个由Adobe开发的组件库和工具，可帮助你构建自适应，可访问且健壮的用户体验。帮助开发者使用React构建功能丰富的应用程序。

https://react-spectrum.adobe.com/index.html

它具备三个主要库，你能够根据须要将它们一块儿使用或分别使用：

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

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

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

设计系统的问题

即便有React、Vue和Angular等现代前端库的帮助，要建立一个符合UI一致性、可访问性、国际化和可用性等高标准的Web应用仍然至关困难。这也是为何现在设计系统如此流行的缘由。

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

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

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

React Spectrum如何帮助你

React Spectrum为你提供了适合交互和不一样屏幕尺寸的组件。它包括全屏阅读器和键盘导航支持，可访问性。

该库提供的组件应遵循Spectrum的设计指南做为道具，所以你将不会使用常规的HTML属性，例如“class”和“aria-label”。它还实现了主题设置，所以你能够轻松切换应用程序的主题。

要使用React Spectrum，你须要安装库软件包：

npm install @adobe/react-spectrum

而后使用其提供程序容器定义其主题，区域设置和其余应用程序设置：

import {Provider, defaultTheme, Button} from '@adobe/react-spectrum'; 
function App() { 
  return ( 
    <Provider theme={defaultTheme}> 
      <Button variant="cta">Hello React Spectrum!</Button> 
    </Provider> 
  ); 
}

React Spectrum还为你提供了Flex和Grid两种布局系统，因此你能够选择你的团队要用哪一种布局。

import {Flex} from '@adobe/react-spectrum' 
// the component 
<Flex direction="column" width="size-2000" gap="size-100"> 
  <View backgroundColor="celery-600" height="size-800" /> 
  <View backgroundColor="blue-600" height="size-800" /> 
  <View backgroundColor="magenta-600" height="size-800" /> 
</Flex>

将渲染为：

而Grid组件：

import {Grid} from '@adobe/react-spectrum' 
// the component 
<Grid 
  areas={['header  header', 'sidebar content', 'footer  footer']} 
  columns={['1fr', '3fr']} 
  rows={['size-1000', 'auto', 'size-1000']} 
  height="size-6000" 
  gap="size-100"> 
  <View backgroundColor="celery-600" gridArea="header" /> 
  <View backgroundColor="blue-600" gridArea="sidebar" /> 
  <View backgroundColor="purple-600" gridArea="content" /> 
  <View backgroundColor="magenta-600" gridArea="footer" /> 
</Grid>

这将渲染为：

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

React Aria如何工做

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

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

React Aria有组件钩子，容许你在不一样的设备上构建一致的非风格化组件，固然若是你想的话，你能够将其风格化。

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

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

这是实现钩子的方法：

function Button(props) { 
  let ref = useRef(); 
  let {buttonProps} = useButton(props, ref); 
  let {children} = props; 
  return ( 
    <button {...buttonProps} ref={ref}> 
        {children} 
        </button> 
    ); 
} 
<Button onPress={() => alert('Button pressed!')}>Test</Button>

React Aria的另外一个独特功能是其焦点钩子。FocusRing经过给元素赋予特定的样式，一般是一个蓝色的边框，帮助键盘用户肯定页面上哪一个元素具备键盘焦点。

// style 
.button { 
  -webkit-appearance: none; 
  appearance: none; 
  background: green; 
  border: none; 
  color: white; 
  font-size: 14px; 
  padding: 4px 8px; 
} 
.button.focus-ring { 
  outline: 2px solid dodgerblue; 
  outline-offset: 2px; 
} 

// component 
<FocusRing focusRingClass="focus-ring"> 
  <button className="button">Test</button> 
</FocusRing>

当你不使用CSS类(例如样式组件)进行样式设置时，可使用useFocusRing钩子：

function Example() { 
  let {isFocusVisible, focusProps} = useFocusRing(); 
  return ( 
      <button 
        {...focusProps} 
        style={{ 
          WebkitAppearance: 'none', 
          appearance: 'none', 
          background: 'green', 
          border: 'none', 
          color: 'white', 
          fontSize: 14, 
          padding: '4px 8px', 
          outline: isFocusVisible ? '2px solid dodgerblue' : 'none', 
          outlineOffset: 2 
        }}> 
        Test 
      </button> 
    ); 
}

最后，React Aria还提供了对国际化的支持，以帮助你的应用程序适应特定的语言或地区。i18nProvider组件容许你使用应用程序定义的语言环境覆盖浏览器中的默认语言环境：

import {I18nProvider} from '@react-aria/i18n'; 

<I18nProvider locale="fr-FR"> 
  <YourApp /> 
</I18nProvider>

React Stately如何工做

React Stately是一个钩子库，可为你的设计系统提供跨平台状态管理。它能够在Web，react-native或任何其余平台上运行。

例如，你能够实现useRadioGroupState来帮助存储一个Radio按钮组的状态，而不须要定义本身的onChange函数。

import {useRadioGroupState} from '@react-stately/radio'; 
function RadioGroup(props) { 
  let state = useRadioGroupState(props); 

return ( 
    <> 
      <label> 
        <input 
          type="radio" 
          name={state.name} 
          checked={state.selectedValue === 'dogs'} 
          onChange={() => state.setSelectedValue('dogs')} 
        /> 
        Dogs 
      </label> 
      <label> 
        <input 
          type="radio" 
          name={state.name} 
          checked={state.selectedValue === 'cats'} 
          onChange={() => state.setSelectedValue('cats')} 
        /> 
        Cats 
      </label> 
    </> 
  ); 
} 

<RadioGroup 
  defaultValue="dogs" 
  onChange={(value) => alert(`Selected ${value}`)} 
/>

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

总结

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

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

【责任编辑：赵宁宁 TEL：（010）68476606】