JS 框架 词条目录
前端Wiki/词条/MobX

MobX

定义用透明的响应式追踪自动更新依赖的细粒度状态管理库,崇尚修改即同步而非显式派发

MobX 与 Redux 的哲学几乎相反:你把状态声明为 observable,在读到它的组件里建立依赖;修改状态后,依赖它的那些组件自动重渲染。没有 action 类型表、没有 reducer 样板、没有 dispatch,写起来就是改对象——框架通过 getter 上的追踪知道谁依赖谁。

代价是自动化带来黑盒感:精确的重渲染依赖于追踪的正确建立,解构、赋值到新变量这类操作可能意外断掉依赖;严格模式与 action 包装修饰也需要团队约定。在 React 场景它份额已被 Zustand 等轻量方案稀释,但.observable 思想深刻影响了 Vue 的响应式设计。

JavaScript
// MobX 思想的最小演示:依赖追踪 + 自动通知
function observable(target) {
  var subs = {};   // 每个字段记录谁在读它
  Object.keys(target).forEach(function (key) {
    subs[key] = [];
    var value = target[key];
    Object.defineProperty(target, key, {
      get: function () {
        if (currentObserver) subs[key].push(currentObserver);  // 登记依赖
        return value;
      },
      set: function (v) {
        value = v;
        subs[key].forEach(function (fn) { fn(); });            // 修改即通知
      }
    });
  });
  return target;
}

var currentObserver;
function autorun(fn) { currentObserver = fn; fn(); currentObserver = null; }

var store = observable({ count: 0, name: 'MobX' });
autorun(function () { console.log('count 变成:' + store.count); });  // 建立依赖
store.name = '改名';     // 不触发 autorun(无依赖)
store.count = 5;         // 打印:count 变成:5
⚠ 常见误区
🔗 相关词条响应式原理Redux
← 返回来源章节响应式原理