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

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

查看所有标签

猜你喜欢:

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

复盘

复盘

陈中 / 机械工业出版社 / 2013-7-23 / 29

复盘是围棋中的一种学习方法,指的是在写完一盘棋之后,要重新摆一遍,看看哪里下得好,哪里下得不好,对下得好和不好的,都要进行分析和推演。 柳传志第一个将复盘引入到做事之中,成为联想三大方法论之一,在联想每一个重大决策的背后,都有复盘的身影。 本书完整系统讲述了复盘的内容,清晰了复盘的价值,给出了复盘的操作步骤,我们可以在自己的工作生活中,应用复盘的方法,向自己学习,随时随地的提高自己,把......一起来看看 《复盘》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换