内容简介:在写实现思路就是利用高阶组件里的反向继承对包裹组件的所有代码可见
在写 关于MVC模式简单代码实现 的过程中,觉得最麻烦的就是操作 DOM。所以这次升级了,打算用 React。用过 React 的同学都知道,React 在更新视图时,必须要通过 setState
方式改变状态,这一过程是需要我们主动调用的。而 Vue 是通过对 data
下的变量赋值直接更新了视图,Vue 之所以这么简单,是因为采用了数据劫持的方式。所以,这次的目的就是在 React 的基础上实现和 Vue 类似的效果。
实现思路就是利用高阶组件里的反向继承对包裹组件的 state
劫持。这是一个练手的小项目,没考虑那么多:joy:。为什么这么闲,那是因为之前写了 用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 // }) } ......
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- MVP模式+dagger2+ Glide +Fresco+ Retrofit+OkHttp+GreenDao + RxJava + Kotlin(新人练手项目)
- 去哪里找 Java 练手项目?
- 一个适合初级 Gopher 练手的项目
- 简洁的天气预报项目,可用于练手
- golang练手小项目系列(1)-位向量
- golang练手小项目系列(2)-并发爬虫
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。