Base UI是由RadixFloating UI以及Material UI的创建者开发的、不包含任何样式设置的React组件库。如今,该库已经发布了1.0版本,这意味着在经过两年的开发后,这个项目终于达到了能够投入实际使用的稳定状态。此次发布的版本包含了35个可访问性得到了优化的组件,同时包名也发生了变更;此外,还有一个专门的团队会负责这个项目的长期维护工作。

与早期版本相比,1.x版本的发布为开发者带来了许多改进,包括包名的变更、基于从Radix UI中获得的经验对组件API进行了优化,以及所有组件的可访问性功能都得到了增强。此外,这个版本还包含了性能优化措施,并且能与诸如Tailwind CSS、CSS Modules以及CSS-in-JS这类流行的样式解决方案更好地集成在一起。

在本次版本更新中,包名的变更是从@base-ui-components/react变为了@base-ui/react。这一变更要求开发者需要更新他们的导入语句以及package.json文件中的依赖配置。不过,组件的导入语法基本上没有发生变化,因此对于现有用户来说,这个过渡过程是非常顺畅的。下面是一个更新后的导入语法的示例:

import { Popover } from '@base-ui/react';

使用Base UI进行开发的开发者们可以享受到该库所采用的“无样式架构”的优势——这种架构能够让开发者完全掌控组件的样式设置,同时依然保证组件具备出色的可访问性。与那些会预先设定好样式的传统组件库不同,Base UI提供的组件是完全不带任何样式的,这样团队就可以自行实现他们所需的设计体系,而不会受到默认CSS设置的限制。这些组件能够处理复杂的交互逻辑、支持键盘导航、管理焦点,并且还包含了ARIA属性,因此它们在出厂时就已经符合WCAG标准;同时,开发者也可以根据自己的需求为这些组件添加样式。

与Radix UI或Headless UI这样的竞争对手相比,Base UI之所以能够脱颖而出,主要是因为它得到了长期而稳定的支持。虽然Radix UI在被收购之后面临了一些不确定性,但Base UI却得到了MUI的支持——MUI是一家拥有专门致力于这个项目开发的工程师、设计师和管理人员的公司。这种支持为React社区带来了信心,许多开发者都在Hacker News上称赞Base UI的稳定性,并表示非常愿意使用它。

在Reddit上,有用户提问:为什么这个新版本会被宣传为Radix UI的继任者?下面是相关的回复:

我很想知道,为什么你们要把这个新版本称为Radix UI的继任者?具体来说,Radix UI有哪些问题,以至于需要一个全新的UI库来取代它呢?

对此,有人给出了如下解释:

这样是为了说明,由于API设计相似,从Radix迁移到Base UI非常容易。

对于那些正在考虑使用BaseUI的开发者来说,在同一个Reddit帖子中,有人提出了这样一个问题:

为什么我要选择BaseUI而不是Ariakit或React Aria呢?它有哪些其他库所没有的功能呢?

一位Base UI的维护者(_doodack)给出了回答:

React Aria的API设计与Base UI有很大不同。有些开发者喜欢它,而有些则不喜欢。它在React组件树中会引入大量的上下文提供者,因此与其他组件库结合使用时会遇到一些困难。而我们的API设计与Radix以及Ariakit非常相似。

他们还补充说:

我们还有一些其他库中没有的功能,比如“独立触发器”——这种功能在需要在不同触发条件下重复使用相同的弹出窗口元素时非常有用。

Base UI 1.0还对许多特定组件进行了优化,这些优化解决了一些边缘情况,提升了系统的可靠性。例如,ComboBox组件现在能够正确处理表单提交时的itemToStringValue属性,并且允许将null值设置为value属性;Menu组件修复了子菜单会立即弹出的问题,同时确保在按下Escape键时焦点能正确返回到触发元素上;Select组件也在表单处理和空值支持方面得到了改进。整体而言,系统的性能也得到了提升,尤其是减少了不必要的重新渲染操作,提高了运行效率。

Base UI是一个开源的React组件库,由MUI以及Radix和Floating UI项目的核心开发人员共同维护。它注重可访问性、组件的可组合性以及开发者的使用体验,提供了低级别的接口和未添加样式的基础组件,这些组件可以与任何样式方案无缝配合使用。Base UI非常适合那些需要构建自定义设计系统或应用程序的团队,在这类项目中,视觉效果与可访问性同样重要。

Comments are closed.