React Spectrum，Adobe的組件庫和工具入門

時間 2020-08-27

標籤 react spectrum adobe 組件工具入門欄目 React 简体版

原文原文鏈接

React Spectrum是一個由Adobe開發的組件庫和工具，可幫助你構建自適應，可訪問且健壯的用戶體驗。幫助開發者使用React構建功能豐富的應用程序。html

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

它具備三個主要庫，你能夠根據須要將它們一塊兒使用或分別使用：react

React Spectrum是Adobe設計系統Spectrum的一個實現。
React Aria是一個鉤子的集合，用於提供可訪問的UI基元，如國際化和在全部設備上的一致交互。
React Stately是鉤子的另外一個集合，但專一於啓用跨平臺狀態管理

結合在一塊兒，React Spectrum讓你在開發Web應用時有了一個良好的開端，超越了最低限度的要求，提供了卓越的用戶體驗。web

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

設計系統的問題

即便有React、Vue和Angular等現代前端庫的幫助，要建立一個符合UI一致性、可訪問性、國際化和可用性等高標準的Web應用仍然至關困難。這也是爲何現在設計系統如此流行的緣由。react-native

可是建立符合UI標準的設計系統既費時又費錢。從個人經驗來看，我總能看到開發人員和設計人員把過多的精力放在組件風格上，而把可訪問性和國際化排除在基礎以外。當公司剛起步時，沒人會考慮這些!瀏覽器

考慮到本地化工做的難度，這一點是能夠理解的。你須要考慮字符串翻譯，本地化日期和數字格式，啓用從右到左的交互等等。app

這就是爲何React Spectrum如此有價值的緣由。它利用Adobe在設計和開發功能豐富的用戶界面方面的經驗，讓你在實現全部這些瑣碎的細節方面有一個好的開端，這些細節使得全部設備的用戶體驗都很好。ide

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能夠逐步實現。