如何实现一个简单的状态管理库

夜晨 2025-10-30 00:00:00 次阅读

答案：通过Proxy监听状态变化并结合发布-订阅模式，实现轻量级状态管理。创建响应式对象拦截get/set操作，封装Store类管理状态、支持订阅与更新，配合DOM渲染实现视图自动更新，适用于小型项目或原理学习。

实现一个简单的状态管理库，核心是让数据变化可追踪，并在变化时通知相关组件更新。不需要依赖 Redux 或 MobX 这类复杂方案，用原生 JavaScript 就能写出轻量、易懂的状态管理器。

定义响应式状态

关键在于拦截状态的读取和修改。使用 Proxy 可以监听对象属性的变化，当数据改变时自动触发更新。

创建一个可响应的对象，拦截 get 和 set 操作：

function createReactive(data, callback) {
  return new Proxy(data, {
    get(target, key) {
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      callback(); // 状态变化时执行回调
      return true;
    }
  });
}

封装状态管理 Store

把响应式逻辑封装成一个 Store 类，提供统一的访问和变更接口。

Store 应包含以下功能：

保存当前状态
支持订阅状态变化
提供修改状态的方法

class SimpleStore {
  constructor(initialState) {
    this.state = createReactive(initialState, () => {
      this.listeners.forEach(fn => fn());
    });
    this.listeners = [];
  }

  subscribe(fn) {
    this.listeners.push(fn);
    // 返回取消订阅函数
    return () => {
      this.listeners = this.listeners.filter(f => f !== fn);
    };
  }

  setState(updater) {
    if (typeof updater === 'function') {
      updater(this.state);
    } else {
      Object.assign(this.state, updater);
    }
  }
}

在视图中使用 Store

将 Store 与 DOM 结合，在状态变化时重新渲染页面部分。

例如，管理一个计数器：

const store = new SimpleStore({ count: 0 });

// 绑定 UI 更新
function render() {
  document.getElementById('count').textContent = store.state.count;
}

// 初次渲染并订阅更新
render();
store.subscribe(render);

// 按钮点击更新状态
document.getElementById('inc').addEventListener('click', () => {
  store.setState(state => { state.count += 1; });
});

基本上就这些。通过 Proxy 监听状态，用发布-订阅模式通知更新，就能实现一个极简但可用的状态管理库。适合小型项目或理解原理。