您好,登錄后才能下訂單哦!
小編給大家分享一下JavaScrip如何t實現(xiàn)自定義生命周期,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
React,Vue 和 Angular 的流行,讓“生命周期”這個名詞常常出現(xiàn)在前端們的口中,以至于面試中最常見的一個問題也是:
介紹下React, Vue的生命周期以及使用方法?
聽起來高大上的“生命周期”,其實也就是一些普通的方法,只是在不同的時期傳參調(diào)用它們而已。我們可以照著React的生命周期,自己模擬一個簡單的類,并讓這個類擁有一些生命周期鉤子
我們希望實現(xiàn)一個State類,這個類擁有以下方法和生命周期:
方法:
setState
生命周期:
willStateUpdate (nextState): 狀態(tài)將要改變
shouldStateUpdate (nextState): 是否要讓狀態(tài)改變,只有返回true才會改變狀態(tài)
didStateUpdate (prevState): 狀態(tài)改變后(要是 shouldStateUpdate 返回的不為true則不會調(diào)用)
<!-- more -->
class User extends State { constructor(name) { super(); this.state = { name } } willStateUpdate(nextState) { console.log('willStateUpdate', nextState); } shouldStateUpdate(nextState) { console.log('shouldStateUpdate', nextState); if (nextState.name === this.state.name) { return false; } return true; } didStateUpdate(prevState) { console.log('didStateUpdate', prevState); } } const user = new User('deepred'); user.setState({ name: 'hentai' });
首先,你需要知道JavaScript的面向?qū)ο蠡A(chǔ)知識,如果還不是很了解,可以先看下這篇文章JavaScript的面向?qū)ο?/p>
class State { constructor() { this.state = {}; } setState(nextState) { const preState = this.state; this.state = { ...preState, ...nextState, }; } }
class User extends State { constructor(name) { super(); this.state = { name } } } const user = new User('tc'); user.setState({age: 10}); // {name: 'tc', age: 10}
在React中,setState方法只會改變特定屬性的值,因此,我們需要在方法里用一個變量preState保留之前的state,然后通過展開運算符,將新舊state合并
willStateUpdate的實現(xiàn)
willStateUpdate是state狀態(tài)更新前調(diào)用的。因此只要在合并state前調(diào)用willStateUpdate就行
class State { constructor() { this.state = {}; } setState(nextState) { // 更新前調(diào)用willStateUpdate this.willStateUpdate(nextState); const preState = this.state; this.state = { ...preState, ...nextState, }; } willStateUpdate() { // 默認啥也不做 } }
class User extends State { constructor(name) { super(); this.state = { name } } // 覆蓋父級同名方法 willStateUpdate(nextState) { console.log('willStateUpdate', nextState); } } const user = new User('tc'); user.setState({age: 10}); // {name: 'tc', age: 10}
shouldStateUpdate的實現(xiàn)
我們規(guī)定只有shouldStateUpdate返回true時,才更新state。因此在合并state前,還要調(diào)用shouldStateUpdate
class State { constructor() { this.state = {}; } setState(nextState) { this.willStateUpdate(nextState); const update = this.shouldStateUpdate(nextState); if (update) { const preState = this.state; this.state = { ...preState, ...nextState, }; } } willStateUpdate() { // 默認啥也不做 } shouldStateUpdate() { // 默認返回true,一直都是更新 return true; } }
class User extends State { constructor(name) { super(); this.state = { name } } // 覆蓋父級同名方法 willStateUpdate(nextState) { console.log('willStateUpdate', nextState); } // 自定義何時更新 shouldStateUpdate(nextState) { if (nextState.name === this.state.name) { return false; } return true; } } const user = new User('tc'); user.setState({ age: 10 }); // {name: 'tc', age: 10} user.setState({ name: 'tc', age: 11 }); // 沒有更新
didStateUpdate的實現(xiàn)
懂了willStateUpdate也就知道didStateUpdate如何實現(xiàn)了
class State { constructor() { this.state = {}; } setState(nextState) { this.willStateUpdate(nextState); const update = this.shouldStateUpdate(nextState); if (update) { const preState = this.state; this.state = { ...preState, ...nextState, }; this.didStateUpdate(preState); } } willStateUpdate() { // 默認啥也不做 } didStateUpdate() { // 默認啥也不做 } shouldStateUpdate() { // 默認返回true,一直都是更新 return true; } }
class User extends State { constructor(name) { super(); this.state = { name } } // 覆蓋父級同名方法 willStateUpdate(nextState) { console.log('willStateUpdate', nextState); } // 覆蓋父級同名方法 didStateUpdate(preState) { console.log('didStateUpdate', preState); } shouldStateUpdate(nextState) { console.log('shouldStateUpdate', nextState); if (nextState.name === this.state.name) { return false; } return true; } } const user = new User('tc'); user.setState({ age: 10 }); user.setState({ name: 'tc', age: 11 });
通過幾十行的代碼,我們就已經(jīng)實現(xiàn)了一個自帶生命周期的State類了!
看完了這篇文章,相信你對JavaScrip如何t實現(xiàn)自定義生命周期有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。