So implementieren Sie einen benutzerdefinierten Lebenszyklus in JavaScript (Codebeispiel)

In diesem Artikel geht es um die Methode zur Implementierung eines benutzerdefinierten Lebenszyklus in JavaScript (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

Die Beliebtheit von React, Vue und Angular hat dazu geführt, dass der Begriff „Lebenszyklus“ oft im Mund von Front-End-Profis auftaucht, so sehr, dass dies auch eine der häufigsten Fragen in Interviews ist :

Einführung Was sind die Lebenszyklen und Nutzungsmethoden von React und Vue?

Der „Lebenszyklus“, der sich schick anhört, besteht eigentlich nur aus einigen gewöhnlichen Methoden, bei denen nur Parameter übergeben und auf unterschiedliche Weise aufgerufen werden Perioden. Wir können selbst eine einfache Klasse entsprechend dem Lebenszyklus von React simulieren und dieser Klasse einige Lebenszyklus-Hooks geben

Wir hoffen, eine State-Klasse zu implementieren, die über die folgenden Methoden und Lebenszyklen verfügt:

Methode:

• setState

Lebenszyklus:

• willStateUpdate (nextState): Der Zustand ändert sich gerade

• shouldStateUpdate (nextState): Wenn Sie möchten, dass sich der Status ändert, ändert sich der Status nur, wenn true zurückgegeben wird

• didStateUpdate (prevState): Nachdem sich der Status geändert hat (wenn ShouldStateUpdate nicht true zurückgibt, wird es nicht aufgerufen)

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' });

Zuallererst müssen Sie es wissen: Wenn Sie die Grundlagen des objektorientierten JavaScript-Wissens nicht kennen, können Sie zunächst diesen Artikel lesen: JavaScripts objektorientierte

Implementierung von 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}

In React ändert die setState-Methode nur bestimmte Werte des Attributs. Daher müssen wir in der Methode eine Variable preState verwenden, um den vorherigen Status beizubehalten, und dann den alten und neuen Status über den Spread-Operator

Implementierung von willStateUpdate

willStateUpdate wird aufgerufen, bevor der Status aktualisiert wird. Rufen Sie also einfach willStateUpdate auf, bevor Sie den Status zusammenführen.

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}

Implementierung von ShouldStateUpdate

Wir legen fest, dass der Status nur aktualisiert wird, wenn ShouldStateUpdate „true“ zurückgibt. Daher sollte vor dem Zusammenführen des Status StateUpdate

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 implementiert werden

Wenn Sie willStateUpdate verstehen, wissen Sie auch, wie didStateUpdate implementiert wird

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 });

Bestanden Mit nur ein paar Dutzend Codezeilen haben wir eine State-Klasse mit eigenem Lebenszyklus implementiert

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen benutzerdefinierten Lebenszyklus in JavaScript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!