helux 是一个集atom、signal、依赖收集、派生、观察为一体，支持细粒度响应式更新的状态引擎，支持所有类 react 框架（包括 react 18）

特性简介：

• 内置依赖追踪特性，基于最快的不可变 js 库limu开发，拥有超强性能
• atom 支持任意数据结构且自带依赖收集功能， 无需拆分很细，天然对 DDD 领域驱动设计友好
• 内置 signal 响应机制，实现 0 hook 编码 dom 粒度或块粒度的更新
• 内置 loading 模块，可管理所有异步任务的运行状态、并捕捉错误抛给组件、插件
• 内置 sync 系列 api，支持双向绑定，轻松应对表单处理
• 内置 reactive 响应式对象，支持数据变更直接驱动关联 ui 渲染
• 内置 define 系列 api，方便对状态模块化抽象，轻松驾驭大型前端应用架构
• 内置事件系统
• 支持可变派生，适用于当共享对象 a 部分节点变化需引起其他节点自动变化的场景，数据更新粒度更小
• 支持全量派生，适用于不需要对数据做细粒度更新的场景
• 全量派生、可变派生均支持异步任务
• 全量派生、可变派生除数据变更驱动执行外，还支持人工重新触发运行
• 支持中间件、插件系统，可无缝对接 redux 生态相关工具库
• 100% ts 编码，类型安全

30s 上手

使用 npm 命令npm i helux安装helux，然后调用atom创建共享状态，调用useAtom使用共享状态，that's all，你已接入helux来提升局部状态为共享状态. 

import React from 'react';
+ import { atom, useAtom } from 'helux';
+ const [sharedState] = atom({ a: 100, b: { b1: 1 } });

function HelloHelux(props: any) {
-   const [state, setState] = React.useState({ a: 100, b: { b1: 1, b2: 2 } });
+   const [state, setState] = useAtom(sharedState);

-   const change = setState((prev) => ({ ...prev, b: { ...prev.b, b1: 100 } }));
+   const change = setState((draft) => { draft.b.b1 = 100 });

  // 收集到当前组件依赖为 a，仅当 a 变更时才触发重渲染
  return <div>{state.a}</div>;
}

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/3949