当前位置：首页 > 行业动态 > 正文

Hydra.js

admin
行业动态
2025-04-29
4670

Hydra.js是轻量级React状态管理库，简化组件状态与表单处理，提升开发效率，避免复杂方案

Hydra.js 详解

核心概念

特性	说明
轻量级	体积仅约1KB，无多余依赖
响应式	基于 `Proxy` 实现数据变更自动追踪
模块化	支持按需加载不同模块的状态
时间旅行	内置状态历史记录，支持前进/后退操作

核心功能解析

Store

全局状态容器，通过 createStore 创建

示例：

import { createStore } from 'hydra-js';
const store = createStore({ count: 0 });

Actions

Hydra.js 第1张

定义状态修改逻辑

示例：

store.setActions({
  increment(state) {
    state.count += 1;
  }
});

Computed

响应式计算属性，依赖状态自动更新

示例：

store.setComputed({
  isEven(state) {
    return state.count % 2 === 0;
  }
});

Middleware

扩展状态变更流程（如日志、异步操作）

示例：

store.use(middleware => {
  middleware.before((action, state) => {
    console.log(`Action: ${action.name}`);
  });
});

安装与配置

# 通过 npm 安装
npm install hydra-js
# 通过 CDN 引入
<script src="https://unpkg.com/hydra-js"></script>

使用场景示例

场景	代码示例
全局计数器	`store.dispatch('increment')` 更新计数，`store.count` 读取
表单状态管理	将表单数据存储在 Store 中，自动同步到 UI
多模块状态	通过 `createModule` 分割状态，如用户模块、设置模块

与其他状态库对比

特性	Hydra.js	Redux	MobX
学习成本	低（API 简单）	中	中
体积	极小（1KB）	较大	中等
响应式	内置	需配合中间件	核心特性
时间旅行	内置	需配合中间件	需手动实现

相关问题与解答

Q1：Hydra.js 是否支持 TypeScript？

A1：
Hydra.js 本身对 TypeScript 友好，但需手动定义类型。

import { createStore } from 'hydra-js';
interface State {
  count: number;
}
const store = createStore<State>({ count: 0 });
store.setActions<State>({
  increment(state) {
    state.count++;
  }
});

Q2：如何处理异步操作（如 API 请求）？

A2：
通过中间件实现异步流程控制。

store.use(middleware => {
  middleware.after(async (action, state) => {
    if (action.name === 'fetchData') {
      const data = await apiCall(); // 假设为异步函数
      action.meta.result = data;   // 将结果存入 meta
    }
  });
});
// 调用时检查 meta
store.dispatch('fetchData').then(action => {
  console.log(action.meta.result);
});