我这就来聊聊，怎么手写一个类似 Mobx 的 React 响应式状态库。 你可Neng觉得自己要写一个库，那是件hen大事儿。 但其实核心思路并不复杂，咱们一步步拆解。

先说说背景

Ru果你用过 Vue 或者 Redux，你会发现它们dou在Zuo同一件事：把状态变化跟 UI 自动绑定。 Vue 用数据劫持；Redux 用纯函数和不可变对象。 Mobx 则把两者的优点揉在一起，提供一种“自动派生”机制。

我想给你讲一个从零开始的过程。 不需要你记住每一行代码，只要Neng感受到思路即可。

核心概念拆解

Mobx 里有三件事：Observable、Reaction、Observer。 Observable 就是可观察的数据；Reaction 是订阅者；Observer 把组件包装成订阅者。

先写一个Zui小的 ObservableValue：

class ObservableValue {
    constructor {
        this.value_ = value;
        this.observers_ = new Set;
    }
    get {
        if  {
            this.observers_.add;
        }
        return this.value_;
    }
    setNewVal {
        this.value_ = val;
        // 触发依赖
        this.observers_.forEach);
    }
}

这里的 trick 是：当我们读到属性时把当前正在跑的 Reaction 加进集合； 当属性改了就让所有订阅者重新跑一次。

Reaction 的实现

我们先写个简单版本：

class Reaction {
    constructor {
        this.onInvalidate_ = onInvalidate;
    }
    track {
        globalState.trackingDerivation = this;
        fn;
        globalState.trackingDerivation = null;
    }
    schedule_ { // 触发geng新
        this.onInvalidate_;
    }
}

这个类负责两件事：收集依赖和触发geng新。

Observer HOC

React 的函数组件Ke以像普通函数一样拿来包装：

import { useRef } from 'react';
export function observer {
    return  => {
        const admRef = useRef;
        if  {
            const reaction = new Reaction => {
                reaction.track => { /* 收集依赖 */ });
            });
            admRef.current = reaction;
            // 第一次运行
            reaction.schedule_;
        }
        const reaction = admRef.current;
        // 每次渲染前让它跑一次
        reaction.schedule_;
        return baseComponent;
    };
}

注意这里的“schedule”实际上会调用一次回调，让组件重新执行。

MVC 与 Mobx 的区别

MVC 里的 View 就是 React Component，Model 就是 state，Controller 就是 action。 Mobx 用的是 Observer Pattern，虽然名字不同，但本质相同。

MVC 思路简化版

function observable{
   const adm=new ObservableObjectAdministration;
   target.__ob__=adm;
   Object.keys.forEach(key=>{
      adm.defineObservableProperty_;
   });
   return target;
}
class ObservableObjectAdministration{
   constructor{
      this.target_=target;
      this.values_=new Map;
   }
   defineObservableProperty_{
      const observable=new ObservableValue;
      this.values_.set;
      Object.defineProperty(this.target_,key,{
          get{return observable.get;},
          set{observable.setNewVal;}
      });
   }
}

这段代码Zuo了两件事：遍历对象属性，把每个属性包装成可观察值；再用 Object.defineProperty 劫持 getter/setter。

为什么需要全局开关？

因为 Mobx 默认不允许在 action 外修改状态，这样Ke以保持单向数据流。 我们给全局加一个开关：

const globalState={trackingDerivation:null,allowStateChanges:false};
function checkIfAllowed{
 if{
     console.warn;
 }
}

在 setNewVal 前调用 checkIfAllowed 即可。

Mediator Pattern 细节

上面实现Yi经Neng跑，但还缺少一些细节，比如 Action 高阶函数。 Action 用来包裹用户自定义的方法，让它们在执行时打开 allowStateChanges 开关。

function createAction{
   function res{
       globalState.allowStateChanges=true;
       try{ fn.apply; }finally{
           globalState.allowStateChanges=false;
       }
   }
   return res;
}
class Timer{
   secondsPassed=0; 
   constructor{ makeAutoObservable; } 
   increase{this.secondsPassed+=1;}
}
const myTimer=new Timer; 
// 在 UI 中观察
const TimerView=observer=>Seconds passed: {timer.secondsPassed});
// 每秒geng新
setInterval=>{myTimer.increase},1000); 
export default App;

这里的 makeAutoObservable 就是一份简化版：

{…}

但我就不展开了重点是：只要把类实例化后循环其 ownKeys + prototype keys，然后用 defineObservableProperty_ 劫持即可。

MobX 与 Vue 的对比细节

MVC 在 Vue 中通过 Proxy/defineProperty 实现响应式，而 MobX geng偏向 OOP：类实例化后再劫持属性。

MobX 要求所有 state 改动dou必须经过 action，而 Vue 没有这个限制。

MobX 的 Reaction geng像 Vue Watcher，只是在geng新时不再收集依赖，而直接执行回调。

为什么百度不收录？——答案来了！

哈哈！那问题来了为什么百度搜索不到我的代码片段？答案hen简单：

Baidu 对外部 JavaScript 文件并不会深度抓取，只抓页面文本内容。

CORS 限制也会阻止爬虫访问你的 JS 域名下资源。

Baidu geng关注 SEO 标题、关键词密度、外链质量等因素，Ru果你的页面没有这些优化，就算有代码也被忽略了。

Troubleshooting 快速排查表

  - 确认全局状态开关是否正常打开/关闭。若无效，kan console 是否报错 “Strict mode…” 。

  - 检查 Reaction 是否正确保存到了 useRef，避免多次创建导致内存泄漏。

  - 验证 Observer 是否返回组件结果，否则 UI 会空白。

A/B 测试建议

- 对比使用原生 React 状态 vs 手写 MobX 样例，kan渲染性Neng差异。

一句话——你Ke以把自己的项目改成 Reactive!

“别忘了加注释哦！” —— 像老朋友一样说话，却永远保持技术热情~

---