ReactSpectrum，Adobe的组件库和工具入门

这是实现钩子的方法：

 
 
 
 

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

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 
  
  
  
  
 
  
  
  
  
  Test 
  
  
  
  
 
 
 
 
 

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

 
 
 
 

  
  
  
  
function Example() { 
  
  
  
  
  let {isFocusVisible, focusProps} = useFocusRing(); 
  
  
  
  
  return ( 
  
  
  
  
      
  
  
  
  
        {...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 
  
  
  
  
       
  
  
  
  
    ); 
  
  
  
  
} 
 
 
 
 

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

  
  
 
 

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

React Stately如何工作

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

例如，你可以实现useRadioGroupState来帮助存储一个Radio按钮组的状态，而不需要定义自己的onChange函数。

  
  
 
 

   
   
  
  
import {useRadioGroupState} from '@react-stately/radio'; 
   
   
  
  
function RadioGroup(props) { 
   
   
  
  
  let state = useRadioGroupState(props); 
   
   
  
  
   
   
   
  
  
return ( 
   
   
  
  
    <> 
   
   
  
  
       
   
   
  
  
        
   
   
  
  
          type="radio" 
   
   
  
  
          name={state.name} 
   
   
  
  
          checked={state.selectedValue === 'dogs'} 
   
   
  
  
          onChange={() => state.setSelectedValue('dogs')} 
   
   
  
  
        /> 
   
   
  
  
        Dogs 
   
   
  
  
       
   
   
  
  
       
   
   
  
  
        
   
   
  
  
          type="radio" 
   
   
  
  
          name={state.name} 
   
   
  
  
          checked={state.selectedValue === 'cats'} 
   
   
  
  
          onChange={() => state.setSelectedValue('cats')} 
   
   
  
  
        /> 
   
   
  
  
        Cats 
   
   
  
  
       
   
   
  
  
     
   
   
  
  
  ); 
   
   
  
  
} 
   
   
  
  
 
   
   
  
  

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

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

总结

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

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