一、前言
官方介绍：
Zag 是一个与框架无关的工具包，用于设计系统和 Web 应用程序中实现复杂、交互式和可访问的 UI 组件。
可以在 React、Solid 和 Vue 中构建可访问的 UI 组件，无需为逻辑而烦恼。
简单理解：使用状态机方法实现常见的组件模式
背景介绍
过去我们经历了太多与我们如何协调事件、管理状态和副作用有关的小问题和错误。大多数这些错误都与useEffect编排useMemo有关useCallback。
二、Zag的特性
Why Zag?
由状态机提供支持：Zag 建立在状态图中的最新理念之上。不遵循 SCXML 规范，创建了一个我们认为可以帮助我们快速构建更复杂组件的 API。
一次编写，随处使用：组件交互以与框架无关的方式建模。我们为 JS 框架提供了适配器，因此可以在 React、Solid 或 Vue 3 中使用它。
关注可访问性：Zag 在构建时考虑了可访问性。处理了与键盘交互、焦点管理、咏叹调角色和属性相关的许多细节。
Headless：machine APIs完全没有样式，让用户可以控制使用自己喜欢的任何样式解决方案。增量采用：根据需要采用机器。每个组件机器都是一个 NPM 包，可以单独安装，以便用户可以增量使用它们。
三、安装
Zag 可以在大多数 JS 框架中使用，例如 Vue、React 和 Solid。
@zag-js/vue
@zag-js/react
@zag-js/solid
1.为自己感兴趣的组件安装机器
npm i --save @zag-js/{component} # or yarn add @zag-js/{component}
2.为自己选择的框架安装适配器，命令如下：
# react npm install @zag-js/react # or yarn add @zag-js/react # vue npm install @zag-js/vue # or yarn add @zag-js/vue # solid npm install @zag-js/solid # or yarn add @zag-js/solid
四、demo
一、React项目中使用的toggle machine的示例：
import { useMachine, useSetup } from "@zag-js/react" import * as toggle from "@zag-js/toggle" export function Toggle() { const [state, send] = useMachine(toggle.machine) const ref = useSetup({ send, id: "1" }) const api = toggle.connect(state, send) return ( <button ref={ref} {...api.buttonProps}> {api.isPressed ? "开" : "关"} </button> ) }
由于machine hook中使用了 useSnapshot 挂钩，Zag 在幕后使用 valtio 来提供自动渲染优化。
二、与 Vue 3 (JSX) 一起使用Zag 与 Vue 的 JSX 方法无缝协作。在 Vue 中使用相同的toggle逻辑：
import { computed, defineComponent, h, Fragment } from "vue" import * as toggle from "@zag-js/toggle" import { useMachine, useSetup, normalizeProps } from "@zag-js/vue" export default defineComponent({ name: "Toggle", setup() { const [state, send] = useMachine(toggle.machine) const ref = useSetup({ send, id: "1" }) const apiRef = computed(() => toggle.connect(state, send, normalizeProps)) return () => { const api = apiRef.value return ( <button ref={ref} {...api.buttonProps}> {api.isPressed ? "开" : "关"} </button> ) } }, })
三、与 Solid.js 一起使用如何在 Solid 中使用相同的toggle逻辑：
import { createMemo } from "solid-js" import * as toggle from "@zag-js/toggle" import { useMachine, useSetup, normalizeProps } from "@zag-js/solid" export default function Toggle() { const [state, send] = useMachine(toggle.machine) const ref = useSetup({ send, id: "1" }) const api = createMemo(() => toggle.connect(state, send, normalizeProps)) return ( <button ref={ref} {...api().buttonProps}> {api().isPressed ? "开" : "关"} </button> ) }
有兴趣的小伙伴可以深入学习~社区传送门：https://discord.com/
