React Spectrum是一個由Adobe開發(fā)的組件庫和工具，可幫助你構(gòu)建自適應(yīng)，可訪問且健壯的用戶體驗(yàn)。幫助開發(fā)者使用React構(gòu)建功能豐富的應(yīng)用程序。

[[339306]]

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

它具有三個主要庫，你可以根據(jù)需要將它們一起使用或分別使用：

• React Spectrum是Adobe設(shè)計(jì)系統(tǒng)Spectrum的一個實(shí)現(xiàn)。
• React Aria是一個鉤子的集合，用于提供可訪問的UI基元，如國際化和在所有設(shè)備上的一致交互。
• React Stately是鉤子的另一個集合，但專注于啟用跨平臺狀態(tài)管理

結(jié)合在一起，React Spectrum讓你在開發(fā)Web應(yīng)用時有了一個良好的開端，超越了最低限度的要求，提供了卓越的用戶體驗(yàn)。

這篇文章將幫助你了解React Spectrum想要解決什么問題，以及如何開始使用它。

設(shè)計(jì)系統(tǒng)的問題

即使有React、Vue和Angular等現(xiàn)代前端庫的幫助，要創(chuàng)建一個符合UI一致性、可訪問性、國際化和可用性等高標(biāo)準(zhǔn)的Web應(yīng)用仍然相當(dāng)困難。這也是為什么如今設(shè)計(jì)系統(tǒng)如此流行的原因。

但是創(chuàng)建符合UI標(biāo)準(zhǔn)的設(shè)計(jì)系統(tǒng)既費(fèi)時又費(fèi)錢。從我的經(jīng)驗(yàn)來看，我總能看到開發(fā)人員和設(shè)計(jì)人員把過多的精力放在組件風(fēng)格上，而把可訪問性和國際化排除在基礎(chǔ)之外。當(dāng)公司剛起步時，沒人會考慮這些!

考慮到本地化工作的難度，這一點(diǎn)是可以理解的。你需要考慮字符串翻譯，本地化日期和數(shù)字格式，啟用從右到左的交互等等。

這就是為什么React Spectrum如此有價值的原因。它利用Adobe在設(shè)計(jì)和開發(fā)功能豐富的用戶界面方面的經(jīng)驗(yàn)，讓你在實(shí)現(xiàn)所有這些瑣碎的細(xì)節(jié)方面有一個好的開端，這些細(xì)節(jié)使得所有設(shè)備的用戶體驗(yàn)都很好。

[[339307]]

React Spectrum如何幫助你

React Spectrum為你提供了適合交互和不同屏幕尺寸的組件。它包括全屏閱讀器和鍵盤導(dǎo)航支持，可訪問性。

該庫提供的組件應(yīng)遵循Spectrum的設(shè)計(jì)指南作為道具，因此你將不會使用常規(guī)的HTML屬性，例如“class”和“aria-label”。它還實(shí)現(xiàn)了主題設(shè)置，因此你可以輕松切換應(yīng)用程序的主題。

要使用React Spectrum，你需要安裝庫軟件包：

npm install @adobe/react-spectrum 

然后使用其提供程序容器定義其主題，區(qū)域設(shè)置和其他應(yīng)用程序設(shè)置：

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兩種布局系統(tǒng)，所以你可以選擇你的團(tuán)隊(duì)要用哪種布局。

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還包括如何測試你用它構(gòu)建的應(yīng)用程序的指南，所以如果你有興趣按照Adobe對其UI元素的設(shè)計(jì)來構(gòu)建你的React應(yīng)用程序，你不會后悔使用它。

React Aria如何工作

React Aria的主要目的是幫助你實(shí)現(xiàn)所有人在所有設(shè)備上的可訪問性。這包括各種類型的殘疾人：視覺，聽覺，運(yùn)動和認(rèn)知障礙。

React Aria的偉大之處在于，每個鉤子都被歸納在一個特定的包下，你可以單獨(dú)安裝。這將使你可以將鉤子逐步地逐步引入到組件中。

React Aria有組件鉤子，允許你在不同的設(shè)備上構(gòu)建一致的非風(fēng)格化組件，當(dāng)然如果你想的話，你可以將其風(fēng)格化。

例如，有一個useButton鉤子，可以渲染一個具有以下功能的按鈕：

• 原生HTML<button>支持
• <a>和通過ARIA支持的自定義元素類型
• 鼠標(biāo)和觸摸事件處理以及按狀態(tài)管理
• 鍵盤焦點(diǎn)管理和跨瀏覽器標(biāo)準(zhǔn)化
• 鍵盤事件支持空格鍵和Enter鍵

這是實(shí)現(xiàn)鉤子的方法：

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的另一個獨(dú)特功能是其焦點(diǎn)鉤子。FocusRing通過給元素賦予特定的樣式，通常是一個藍(lán)色的邊框，幫助鍵盤用戶確定頁面上哪個元素具有鍵盤焦點(diǎn)。

// 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> 

當(dāng)你不使用CSS類(例如樣式組件)進(jìn)行樣式設(shè)置時，可以使用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還提供了對國際化的支持，以幫助你的應(yīng)用程序適應(yīng)特定的語言或地區(qū)。i18nProvider組件允許你使用應(yīng)用程序定義的語言環(huán)境覆蓋瀏覽器中的默認(rèn)語言環(huán)境：

import {I18nProvider} from '@react-aria/i18n'; 
 
<I18nProvider locale="fr-FR"> 
  <YourApp /> 
</I18nProvider> 

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}`)} 
/>