关于MVVM模式简单代码实现TypeScript练手小项目

在写 关于MVC模式简单代码实现 的过程中，觉得最麻烦的就是操作 DOM。所以这次升级了，打算用 React。用过 React 的同学都知道，React 在更新视图时，必须要通过 setState 方式改变状态，这一过程是需要我们主动调用的。而 Vue 是通过对 data 下的变量赋值直接更新了视图，Vue 之所以这么简单，是因为采用了数据劫持的方式。所以，这次的目的就是在 React 的基础上实现和 Vue 类似的效果。

实现思路就是利用高阶组件里的反向继承对包裹组件的 state 劫持。这是一个练手的小项目，没考虑那么多????。为什么这么闲，那是因为之前写了 用Type驯化JavaScript 这篇文章，所以就捣鼓出这么一个玩意。

所有代码可见github

// Mvvm.tsxconst 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    // })  }......