我写了一个极简的react状态管理库 :kisstate

github

kisstate

kisstate 是一个遵循 KISS(Keep It Simple, Stupid)原则的轻量级状态管理库,专为 React 应用设计。通过简洁的装饰器和响应式设计,帮助开发者轻松管理组件状态,告别复杂的状态逻辑。


特性 ✨

  • 极简 API:通过装饰器快速声明可观察对象、计算属性和监听器
  • React 深度集成 :通过 observer HOC 实现组件自动响应
  • 零配置:开箱即用,无需复杂配置
  • 浅比较:不做深层监听,更符合React习惯

安装 📦

bash 复制代码
npm install kisstate
# 或
yarn add kisstate

核心概念 🧠

1. Observable Class

使用 @ObservableClass 装饰器声明可观察类:

typescript 复制代码
import { ObservableClass } from 'kisstate';

@ObservableClass
class User {
  name = 'jude';
  age = 26;

  constructor() {
    this.age = 17;
  }
}

2. 属性监听

使用 @watchProps 监听特定属性变化:

typescript 复制代码
@watchProps<User>('age')
onAgeChange() {
  console.log('age changed:', this.age);
}

@watchProps<User>('name')
onNameChange() {
  console.log('name changed:', this.name);
}

3. 计算属性

使用 @computed 声明自动更新的计算属性:

typescript 复制代码
@computed<User>('age')
get nextAge() {
  return this.age + 1;
}

@computed<User>('nextAge')
get nextnextAge() {
  return this.nextAge + 1;
}

4. React 组件绑定

使用 observer HOC 连接 React 组件:

typescript 复制代码
const HocApp = observer(App);

完整示例 🚀

typescript 复制代码
import { ObservableClass, watchProps, observer, computed } from 'kisstate';

// 1. 声明可观察类
@ObservableClass
class User {
  name = 'jude';
  age = 26;

  constructor() {
    this.age = 17;
  }

  // 2. 属性变化监听
  @watchProps<User>('age')
  onAgeChange() {
    console.log('Age changed:', this.age);
  }

  // 3. 计算属性
  @computed<User>('age')
  get nextAge() {
    return this.age + 1;
  }

  @computed<User>('nextAge')
  get nextnextAge() {
    return this.nextAge + 1;
  }
}

// 4. 创建状态实例
const user = new User();

// 5. React 组件
function App() {
  return (
    <div className="card">
      <button onClick={() => user.age++}>
        Current age: {user.age}
      </button>
      <p>Next year: {user.nextAge}</p>
      <p>After next year: {user.nextnextAge}</p>
    </div>
  );
}

// 6. 绑定状态观察
export default observer(App);

工作原理 🔧

  1. 响应式系统:通过 Proxy 实现属性访问追踪
  2. 批量更新:状态变更后自动触发相关组件更新

最佳实践 ✅

  1. 单一数据源:为每个领域模型创建独立的 Observable Class
  2. 细粒度监听:按业务需求拆分监听器
  3. 计算属性缓存:自动缓存计算结果,避免重复计算
  4. 组件分层 :仅在叶子组件使用 observer 进行优化

API 文档 📖

API 说明
@ObservableClass 声明可观察类
@watchProps 监听指定属性变化
@computed 声明计算属性
observer 创建响应式 React 组件

让状态管理回归简单! 🎉

通过 kisstate,您可以专注于业务逻辑而不是状态管理框架的复杂性。欢迎贡献代码和提出建议!

相关推荐
前端老鹰4 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清5 分钟前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
KenXu8 分钟前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏14 分钟前
React组件中的this指向问题
前端·react.js
passer98127 分钟前
列表项切换时同步到可视区域
前端
FogLetter28 分钟前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元29 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api30 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
子林super38 分钟前
y1新建cluster集群redis
前端
liangdabiao40 分钟前
一篇文章尽快介绍入门级智能体Agent是什么回事, Starter AI Agents 项目 来自 awesome-llm-apps
前端·后端