精读《Headless 组件用法与原理》

Headless 组件即无 UI 组件，框架仅提供逻辑，UI 交给业务实现。这样带来的好处是业务有极大的 UI 自定义空间，而对框架来说，只考虑逻辑可以让自己更轻松的覆盖更多场景，满足更多开发者不同的诉求。我们以 headlessui-tabs 为例看看它的用法，并读一读 源码。概述headless tabs 最简单的用法如下：import { Tab } from "@headlessui/react";function MyTabs() {  return (    Tab.Group>      Tab.List>        Tab>Tab 1Tab>        Tab>Tab 2Tab>        Tab>Tab 3Tab>      Tab.List>      Tab.Panels>        Tab.Panel>Content 1Tab.Panel>        Tab.Panel>Content 2Tab.Panel>        Tab.Panel>Content 3Tab.Panel>      Tab.Panels>    Tab.Group>  );}以上代码没有做任何逻辑定制，只用 Tab 及其提供的标签把 tabs 的结构描述出来，此时框架能提供最基础的 tabs 切换特性，即按照 ………………………………