MobX 与 Redux 的哲学几乎相反:你把状态声明为 observable,在读到它的组件里建立依赖;修改状态后,依赖它的那些组件自动重渲染。没有 action 类型表、没有 reducer 样板、没有 dispatch,写起来就是改对象——框架通过 getter 上的追踪知道谁依赖谁。
代价是自动化带来黑盒感:精确的重渲染依赖于追踪的正确建立,解构、赋值到新变量这类操作可能意外断掉依赖;严格模式与 action 包装修饰也需要团队约定。在 React 场景它份额已被 Zustand 等轻量方案稀释,但.observable 思想深刻影响了 Vue 的响应式设计。
// 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