在写 关于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
    // })
  }
......