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

栏目: 后端 · 发布时间: 5年前

内容简介:在写实现思路就是利用高阶组件里的反向继承对包裹组件的所有代码可见

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

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

所有代码可见 github

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Programming Amazon Web Services

Programming Amazon Web Services

James Murty / O'Reilly Media / 2008-3-25 / USD 49.99

Building on the success of its storefront and fulfillment services, Amazon now allows businesses to "rent" computing power, data storage and bandwidth on its vast network platform. This book demonstra......一起来看看 《Programming Amazon Web Services》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码