State Designer与React集成教程：@state-designer/react使用指南

State Designer与React集成教程：@state-designer/react使用指南

【免费下载链接】state-designerState management with statecharts.项目地址: https://gitcode.com/gh_mirrors/st/state-designer

State Designer是一个基于状态图的JavaScript状态管理库，而@state-designer/react则是其React集成版本，提供了简洁的钩子函数来管理React应用中的复杂状态逻辑。本教程将带你快速掌握如何在React项目中使用@state-designer/react进行高效状态管理。

📦 快速安装@state-designer/react

要开始使用State Designer与React集成，首先需要安装@state-designer/react包。你可以通过npm或yarn进行安装：

npm install @state-designer/react

或者

yarn add @state-designer/react

安装完成后，你就可以在React项目中导入并使用State Designer提供的各种钩子函数了。

🔍 核心API介绍

@state-designer/react提供了几个核心API来帮助你管理React应用中的状态：

• useStateDesigner: 用于订阅全局状态或创建局部组件状态
• useSelector: 用于订阅状态的一部分
• createSelectorHook: 生成特定状态的选择器钩子

下面我们将详细介绍这些API的使用方法。

💡 useStateDesigner钩子使用指南

useStateDesigner是@state-designer/react中最核心的钩子，它有两种主要使用方式：订阅全局状态和创建局部状态。

订阅全局状态

首先，你可以使用createState创建一个全局状态，然后在组件中使用useStateDesigner订阅它：

import { createState, useStateDesigner } from '@state-designer/react' // 创建全局状态 export const counterState = createState({ data: { count: 0 }, states: { enabled: { on: { INCREMENTED: { do: (data) => data.count++ }, TOGGLED: { to: 'disabled' }, }, }, disabled: { on: { TOGGLED: { to: 'enabled' }, }, }, }, }) // 在组件中使用 function Counter() { const { data, send } = useStateDesigner(counterState) return ( <div> <button disabled={!counterState.can('INCREMENTED')} onClick={() => send('INCREMENTED')}> {data.count} </button> <button onClick={() => send('TOGGLED')}> {counterState.matches('enabled') ? 'Disable' : 'Enable'} </button> </div> ) }

创建局部组件状态

你也可以直接向useStateDesigner传递一个配置对象来创建局部组件状态：

import { useStateDesigner } from '@state-designer/react' function LocalCounter() { const { data, send } = useStateDesigner({ data: { count: 0 }, states: { enabled: { on: { INCREMENTED: { do: (data) => data.count++ }, TOGGLED: { to: 'disabled' }, }, }, disabled: { on: { TOGGLED: { to: 'enabled' }, }, }, }, }) return ( <div> <button disabled={!send.can('INCREMENTED')} onClick={() => send('INCREMENTED')}> {data.count} </button> <button onClick={() => send('TOGGLED')}> {send.matches('enabled') ? 'Disable' : 'Enable'} </button> </div> ) }

状态依赖管理

当创建局部状态时，你可以提供一个依赖数组，当依赖项变化时，状态会重新创建：

function CounterWithInitial({ initial = 0 }) { const { data, send } = useStateDesigner( { data: { count: initial }, on: { INCREMENTED: { do: (data) => data.count++ } }, }, [initial] // 依赖数组 ) return ( <button onClick={() => send('INCREMENTED')}>{data.count}</button> ) }

🎯 使用useSelector优化渲染性能

当应用规模增长时，你可能希望组件只在特定状态变化时才重新渲染。这时可以使用useSelector钩子：

import { createState, useSelector } from '@state-designer/react' const appState = createState({ data: { tables: 0, chairs: 0, }, on: { ADDED_TABLE: (data) => data.tables++, ADDED_CHAIR: (data) => data.chairs++, }, }) // 只在tables变化时更新 function TablesCounter() { const tables = useSelector(appState, (state) => state.data.tables) return <button onClick={() => appState.send('ADDED_TABLE')}>{tables}</button> } // 只在chairs变化时更新 function ChairsCounter() { const chairs = useSelector(appState, (state) => state.data.chairs) return <button onClick={() => appState.send('ADDED_CHAIR')}>{chairs}</button> }

你还可以自定义比较函数来控制更新时机：

// 只有当椅子数量是否超过10这个状态变化时才更新 const tooManyChairs = useSelector( appState, (state) => state.data.chairs > 10, (prev, next) => prev === next )

🚀 状态设计器界面展示

State Designer提供了直观的状态设计界面，可以帮助你可视化和管理应用状态：

这个界面展示了一个绘图应用的状态设计，左侧是状态树，中间是状态图可视化，右侧是状态配置代码，底部是事件和数据面板。

💻 创建特定状态的选择器钩子

对于经常使用的状态，你可以使用createSelectorHook创建一个绑定到特定状态的选择器钩子，简化代码：

import { createState, createSelectorHook } from '@state-designer/react' const shopState = createState({ data: { products: [], cart: [], }, // ...其他状态配置 }) // 创建绑定到shopState的选择器钩子 const useShopSelector = createSelectorHook(shopState) function CartCount() { // 不需要再传递状态作为第一个参数 const itemCount = useShopSelector(state => state.data.cart.length) return <span>Cart: {itemCount} items</span> }

🎮 实际应用示例：状态驱动的UI

State Designer特别适合管理具有复杂状态逻辑的UI组件。下面是一个使用状态设计器的绘图应用界面示例：

这个应用使用状态设计器管理工具选择、绘图状态、颜色选择等复杂交互逻辑，通过状态转换来控制UI行为。

📚 学习资源与进阶阅读

• 官方教程和示例：archive/tutorials/
• API参考文档：packages/react/README.md
• 核心状态设计逻辑：packages/core/

通过这些资源，你可以深入了解State Designer的更多高级特性和最佳实践。

🔖 总结

@state-designer/react提供了强大而直观的状态管理解决方案，特别适合处理复杂的状态逻辑和用户交互。通过本文介绍的useStateDesigner、useSelector等钩子，你可以轻松地在React应用中实现可预测、可维护的状态管理。

无论是构建简单的交互组件还是复杂的应用状态，State Designer都能帮助你以更清晰的方式组织和管理状态逻辑，提高代码质量和开发效率。

要开始使用State Designer，只需克隆仓库并安装依赖：

git clone https://gitcode.com/gh_mirrors/st/state-designer cd state-designer yarn install

然后就可以探索示例项目和教程，开始你的状态设计之旅了！

【免费下载链接】state-designerState management with statecharts.项目地址: https://gitcode.com/gh_mirrors/st/state-designer