Zag-基于状态机的组件库-技术圈

本文适合对状态机感兴趣的小伙伴阅读

欢迎关注前端早茶，与广东靓仔携手共同进阶～

一、前言

官方介绍：

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

为自己感兴趣的组件安装机器

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/

面试题库推荐

百度某部门面试原题

某中型公司面试原题

【精品】前端知识梳理

五、最后

关注我，一起携手进阶

欢迎关注前端早茶，与广东靓仔携手共同进阶～