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