实现简版 react 状态管理器 mobx

npm i webpack webpack-cli babel-core(babel 核心模块) babel-loader(解析 js) @babel/preset-env(转 es5) @babel/preset-react"(解析 react)  @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators(解析装饰器) mobx mobx-react react react-dom

"start": "webpack -w" 边修改边打包

// 相信大家都了解不多介绍了
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: 'bundle.js',
    path: require('path').resolve(__dirname, 'dist')
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env','@babel/preset-react'],
            plugins: [
              ["@babel/plugin-proposal-decorators", { "legacy": true }],
              "@babel/plugin-proposal-class-properties"
            ]
          }
        }
      }
    ]
  }
}

// ./mobx/observable.js

const observable = (target) => {
  // 需要将 target 进行代理，创建可观察对象
  return createObservable(target)
}

function craeteObservable(val) {
  const handler = () => {
    // 可以进行数据操作，方便拓展
    return {
      get(target, key) {
        // Proxy 配合 Reflect 使用
        return Reflect.get(target, key)
      },
      set(target, key, value) {
        const val = Reflect.set(target, key, value)
        return val // set 必须有返回值，语法规定
      }
    }
  }
  // 由上面可知我们需要对属性递归判断，对象都进行代理
  return deepProxy(val, handler)
}

function deepProxy(val, handler) {
  if (typeif val!== 'object') {
    // 如果是基本类型直接返回
    return val
  }
  // 这里我们要对属性值为对象的属性进行递归处理
  for(const key in val) {
    val[key] = deepProxy(val[key], handler)
  }
  return new Proxy(val, handler())
}

// ./mobx/autorun.js

const autorun = (handler) => {
  Reaction.start(handler) // 全局赋值函数
  handler() // 第一次自动执行，触发 get
  Reaction.end(handler) // 执行完清空全局变量
}

// ./mobx/reaction.js
let nowFn = null // 全局变量

class Reaction {
  // start 和 end 仅仅做了变量处理
  static start(handler) {
    nowFn = handler
  }
  static end() {
    nowFn = null
  }
}

// ./mobx/observable.js. createObservable

function createObservable(val) {
  // 声明一个装门用来 代理的对象

  let handler = () => {
    // 每个属性都对应一个新的 reaction 实例
    let reaction = new Reaction() // 每个属性都有自己对应的那个  reaction
    return {
      set(target, key, value) {
        const val = Reflect.set(target, key, value)
        // 当属性值改变的时候，我们依次执行该属性依赖的函数。放在 set 改值之后执行，这样 autorun 函数中就能拿到最新的属性值
        reaction.run()
        return val
      },
      get(target, key) {
        // 获取对象属性时，进行依赖函数的收集，一个属性可以对多个函数
        reaction.collect()
        return Reflect.get(target, key)
      }
    }
  }
  ...

let nowFn = null; // 当前的 autorun 方法

// 每个属性对应一个实例，每个实例有自己的 id 区分
let counter = 0
class Reaction {
  constructor() {
    this.id = ++counter
    this.store = {} // 存储当前可观察对象对应的 nowFn {id: [nowFn, nowFn]}
  }
  static start(handler) {
    nowFn = handler
  }

  static end() {
    nowFn = null
  }

  collect() {
    // 当前有需要绑定的函数  在 autorun 里，如果在 autorun 外使用不做关联
    if (nowFn) {
      this.store[this.id] = this.store[this.id] || []
      this.store[this.id].push(nowFn)
    }
  }
  run() {
    // 依次执行
    this.store[this.id]?.forEach(handler => {
      handler()
    })
  }
}

// 收集 autorun方法， 帮我们创建 当前属性和autorun的关系
export default Reaction

import {observable, autorun} from './mobx'

const obj = {name: 'obj', age: {val: 99}}
const o = observable(obj)

autorun(() => {
  console.log(o.name)
})

o.name = 'hello'
o.name = 'emily'

class Store {
  @observable name = 'emily'
  @observable age = 18

  get allName() {
    return this.name + this.age
  }

  add = () => {
    this.age+=1
  }
}
const store = new Store()

autorun(() => {
  console.log(store.allName)
})

store.add()
store.add()

const observable = (target, key, descritor) => {
  // 如果不是装饰器，只有第一个参数就可以了，我们这里简单用第二个参数判断
  if(typeof key === 'string') {
    // 是通过装饰器实现的，先把装饰的对象就行深度代理
    let v = descritor.initializer() // 获取原始值
    v = createObservable(v)
    let reaction = new Reaction()
    return {
      enumerable: true,
      configurable: true,
      // 处理同 Proxy
      get() {
        reaction.collect()
        return v
      },
      set(value) {
        v = value
        reaction.run()
      }
    }
  }
  ...

import React from 'react'
import ReactDOM from 'react-dom/client'

import { observable, observer } from './mobx'

class Store {
  @observable count = 0

  get type() {
    return this.count % 2 ? 'odd' : 'event'
  }

  add = () => {
    this.count += 1
  }
}
const store = new Store()

@observer
class Counter extends React.Component {
  constructor(props) {
    super(props)
  }
  // 我们可以看到 render 中依赖了 store 属性
  render() {
    const {store} = this.props
    return <div>
      <p>{store.count}</p>
      <button onClick={() => {
        store.add()
      }}>+</button>
      <p>{store.type}</p>
    </div>
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Counter store={store} />)

// ./mobx/observer.js
import autorun from "./autorun"

const observer = (target) => {
  let cwm = target.prototype.componentWillMount
  
  // 我们在 componentWillMount 中实现收集和重绘
  target.prototype.componentWillMount = function() {
    cwm && cwm.call(this)
    autorun(() => {
      // 只要依赖的数据更新了就重新执行
      this.render() //收集依赖
      this.forceUpdate() // 强制刷新
    })
  }
}

export default observer