這篇文章帶給大家的內容是關於JavaScript實作自訂生命週期的方法（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
React，Vue 和Angular 的流行，讓「生命週期」這個名詞常常出現在前端們的口中，以至於面試中最常見的一個問題也是：
介紹下React, Vue的生命週期以及使用方法?
聽起來高大上的“生命週期”，其實也就是一些普通的方法，只是在不同的時期傳參調用它們而已。我們可以照著React的生命週期，自己模擬一個簡單的類，並讓這個類別擁有一些生命週期鉤子
我們希望實作一個State類，這個類別擁有以下方法和生命週期：
方法：
生命週期:
willStateUpdate (nextState):狀態會改變
shouldStateUpdate (nextState): 是否要讓狀態改變，只有回傳true才會改變狀態
didStateUpdate (prevState):狀態改變後（要是shouldStateUpdate 回傳的不為true則不會呼叫）
#
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的物件導向基礎知識，如果還不是很了解，可以先看這篇文章JavaScript的物件導向
setState的實作
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的實作
#willStateUpdate是state狀態更新前呼叫的。因此只要在合併state之前呼叫willStateUpdate就行
class State {
constructor() {
this.state = {};
}
setState(nextState) {
// 更新前调用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的實作
我們規定只有shouldStateUpdate傳回true時，才更新state。因此在合併state前，也要呼叫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的實作
懂了willStateUpdate也就知道didStateUpdate如何實現了
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 });登入後複製
#透過透過幾十行的程式碼，我們就已經實作了自帶生命週期的State類別了!
#
以上是JavaScript實作自訂生命週期的方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
