全新的 React 组件设计理念 Headless UI

[zuopf769]

全新的 React 组件设计理念 Headless UI

概要：

通过 Headless UI，我们可以快速复用组件的状态以及交互逻辑，对于布局和样式实现完全自定义。

值得一提的是，在日常开发中，我们也可以尝试借鉴这样的思路，将通用状态逻辑抽离出去，方便复用，帮助我们在日常开发提效。比如：常见的筛选过滤、分页请求列表数据的逻辑等；甚至，我们还可以将业务逻辑同 UI 交互进行抽离，比如：在多端场景（Web PC 端、小程序端、RN 端）下复用同一套业务逻辑代码，实现业务逻辑复用和统一，以此大大提高我们的生产力。

推荐语：

Headless UI 是一个组件库设计的新思路，也是未来组件库必然的趋势。对于前端同学而言，学习了解它也显得尤为重要。

[zuopf769]

https://chakra-ui.com/docs/components

[zuopf769]

关于组件，目前在国外已经有些探索和实践的案例，比如 React-Popper、React-Hook-Form、TanStack-Table，三个是组件库“三大难”，它们 stars （均上万）和活跃度都非常高，未来基于 headless UI 设计实践的组件只会越来越多。