在寫 關於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
// })
}
......