關於MVVM模式簡單代碼實現(TypeScript練手小項目)

在寫 關於MVC模式簡單代碼實現 的過程當中，以爲最麻煩的就是操做 DOM。因此此次升級了，打算用 React。用過 React 的同窗都知道，React 在更新視圖時，必需要經過 setState 方式改變狀態，這一過程是須要咱們主動調用的。而 Vue 是經過對 data 下的變量賦值直接更新了視圖，Vue 之因此這麼簡單，是由於採用了數據劫持的方式。因此，此次的目的就是在 React 的基礎上實現和 Vue 相似的效果。

實現思路就是利用高階組件裏的反向繼承對包裹組件的 state 劫持。這是一個練手的小項目，沒考慮那麼多😂。爲何這麼閒，那是由於以前寫了 用Type馴化JavaScript 這篇文章，因此就搗鼓出這麼一個玩意。

全部代碼可見github

// Mvvm.tsx
const hocExtends = (WrapperComponent: ComponentClass) => (
  class extends WrapperComponent {
    constructor(props: any) {
      super(props);
    }
    render() {
      let self = this;
      this.state = new Proxy({ ...this.state }, {
        get: function (target, key, receiver) {
          return Reflect.get(target, key, receiver);
        },
        set: function (target, key, value, receiver): any {
          self.setState({
            [key]: value
          })
          return Reflect.set(target, key, value, receiver);
        }
      })
      return super.render()
    }
  }
)

......
filterSearchStuff(searchStuff: string): void {
    const { stuffData } = this.state;
    let stuffItem: IStuff = stuffData.find((item: IStuff) => item.stuff === searchStuff)
    this.state.stuffItem = stuffItem;
    // this.setState({
    //   stuffItem
    // })
  }
......